/* ============================================================
   ЖУРНАЛ ОБЪЕКТА — концепция «Журнал» (тёплый, рабочий, диспетчерский)
   Стек: ванильный HTML/CSS/JS, mobile-first. Шрифты с кириллицей.
   ============================================================ */

:root {
 --bg: #f6f7f3; /* тёплый «бумажный» фон */
 --bg-grid: rgba(31, 42, 46, 0.035);
 --surface: #ffffff;
 --surface-2: #fbfaf6;
 --ink: #1f2a2e; /* не чистый чёрный */
 --ink-soft: #4b5a5f;
 --muted: #636f75; /* P2: было #8a9498 — контраст 2.88:1, стало 4.81:1 на фоне и 5.17:1 на белом */
 --line: #e4e1d5; /* «журнальная» линия */
 --line-soft: #efede3;
 --accent: #b45309; /* глубокий янтарь (кнопки, акцент) */
 --accent-bright: #d97706;
 --accent-ink: #7c3f02;
 /* Фирменная зелёная шкала (P2): те же значения, теперь токенами */
 --brand-900: #035e46;
 --brand-800: #047857;
 --brand-700: #059669;
 --brand-500: #0fb981;
 --ok: #2f7d4a;
 --ok-bg: #e6f2ea;
 --warn: #b45309;
 --warn-bg: #fbefe1;
 --err: #b42318;
 --err-bg: #fbe9e7;

 --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 --font-display: "Unbounded", var(--font-ui);
 --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

 --line-input: #8f8a7c; /* границы полей: 3.45:1 к белому (WCAG 1.4.11), было 1.2:1 */
 --r-sm: 6px;
 --r-xs: 8px;
 --r-10: 10px;
 --r-14: 14px;
 --r-pill: 999px;
 --r-md: 12px;
 --r-lg: 16px;
 --shadow-md:
  0 4px 6px -1px rgba(31, 42, 46, 0.08), 0 2px 4px -2px rgba(31, 42, 46, 0.06);
 --top: 56px;
 --bottom: 64px;

 /* ===== Движение (P0, 17.10.2026): единые длительности и кривые ===== */
 --dur-1: 120ms; /* мгновенный отклик: наведение, нажатие */
 --dur-2: 200ms; /* обычные переходы */
 --dur-3: 320ms; /* вход панелей и модальных окон */
 --ease: cubic-bezier(0.22, 1, 0.36, 1); /* мягкий выход */
 --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
 --ring: 0 0 0 3px rgba(180, 83, 9, 0.28); /* кольцо фокуса с клавиатуры */
}

/* WCAG 2.4.11 (2.2): якорь/фокус не прячется под закреплённую шапку */
[id] {
 scroll-margin-top: calc(var(--top) + 12px);
}

* {
 box-sizing: border-box;
}
html,
body {
 margin: 0;
 padding: 0;
}
body {
 font-family: var(--font-ui);
 color: var(--ink);
 background: var(--bg);
 font-size: 16px;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 background-image:
  repeating-linear-gradient(0deg, var(--bg-grid) 0 1px, transparent 1px 32px),
  repeating-linear-gradient(90deg, var(--bg-grid) 0 1px, transparent 1px 32px);
}
.hidden {
 display: none !important;
}
button {
 font-family: inherit;
}
.label {
 font-size: 12px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 600;
}
h1,
h2,
h3 {
 line-height: 1.2;
 letter-spacing: -0.01em;
 margin: 0;
}

/* ---------- Бренд ---------- */
.brand {
 display: flex;
 align-items: center;
 gap: 10px;
}
.brand-stamp {
 width: 30px;
 height: 30px;
 border-radius: var(--r-xs);
 background: var(--accent);
 color: #fff;
 display: grid;
 place-items: center;
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 15px;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.brand-stamp svg {
 display: block;
}
.brand-text {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 12px;
 letter-spacing: 0.08em;
 color: var(--ink);
}
.brand-lg .brand-stamp {
 width: 44px;
 height: 44px;
 border-radius: var(--r-10);
}
.brand-lg .brand-text {
 font-size: 15px;
}

/* ---------- Кнопки ---------- */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 44px;
 padding: 0 20px;
 border-radius: var(--r-sm);
 font-weight: 600;
 font-size: 15px;
 cursor: pointer;
 border: 1px solid transparent;
 transition:
  background 0.15s,
  border-color 0.15s,
  box-shadow 0.15s;
}
.btn:focus-visible {
 outline: 2px solid var(--accent-bright);
 outline-offset: 2px;
}
.btn-primary {
 background: var(--accent);
 color: #fff;
}
.btn-primary:hover {
 background: var(--accent-ink);
}
.btn-ghost {
 background: transparent;
 color: var(--ink-soft);
 border-color: var(--line);
}
.btn-ghost:hover {
 border-color: var(--ink-soft);
}
.btn-sm {
 min-height: 36px;
 padding: 0 14px;
 font-size: 14px;
}
.btn-block {
 width: 100%;
}

/* ---------- Поля ---------- */
.field {
 display: block;
 margin-bottom: 16px;
}
.field .label {
 display: block;
 margin-bottom: 6px;
}
.field input {
 width: 100%;
 min-height: 46px;
 padding: 0 14px;
 border: 1px solid var(--line-input);
 border-radius: var(--r-sm);
 font-size: 16px;
 font-family: inherit;
 background: var(--surface);
}
.field input:focus {
 outline: 2px solid var(--accent-bright);
 outline-offset: 1px;
 border-color: transparent;
}
.form-error {
 color: var(--err);
 font-size: 14px;
 margin: 8px 0;
}

/* ---------- Плашки-«штампы» ---------- */
.pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 12px;
 border-radius: var(--r-pill);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.02em;
 border: 1px solid transparent;
}
.pill::before {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: currentColor;
}
.pill-ok {
 background: var(--ok-bg);
 color: var(--ok);
}
.pill-warn {
 background: var(--warn-bg);
 color: var(--warn);
}
.pill-err {
 background: var(--err-bg);
 color: var(--err);
}
.pill-muted {
 background: #eef0ec;
 color: var(--ink-soft);
}

/* ---------- Вход ---------- */
.login-wrap {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 18px;
 padding: 24px 16px;
}
.login-card {
 width: 100%;
 max-width: 420px;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-lg);
 padding: 32px 28px;
 box-shadow: var(--shadow-md);
}
.login-sub {
 margin: 12px 0 24px;
 color: var(--ink-soft);
 font-size: 14px;
}
.login-hint {
 margin-top: 20px;
 font-size: 13px;
 color: var(--muted);
 border-top: 1px dashed var(--line);
 padding-top: 14px;
}

/* ---------- Шапка / раскладка ---------- */
.topbar {
 position: sticky;
 top: 0;
 z-index: 20;
 /* P2: без backdrop-filter — на дешёвых Android он тормозит прокрутку (17.10.2026) */
 background: var(--bg);
 border-bottom: 1px solid var(--line);
}
.topbar-in {
 height: var(--top);
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 16px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.top-user {
 display: flex;
 align-items: center;
 gap: 12px;
}
.top-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--ink-soft);
}
.layout {
 display: flex;
 max-width: 1280px;
 margin: 0 auto;
 min-height: calc(100vh - var(--top) - var(--bottom));
}

.side {
 width: 228px;
 flex: none;
 padding: 20px 12px;
 display: flex;
 flex-direction: column;
 gap: 4px;
 border-right: 1px solid var(--line-soft);
}
.side-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 11px 14px;
 border-radius: var(--r-sm);
 font-weight: 600;
 font-size: 15px;
 color: var(--ink-soft);
 cursor: pointer;
 border: 1px solid transparent;
 background: none;
 text-align: left;
 width: 100%;
}
.side-item:hover {
 background: var(--surface);
 color: var(--ink);
}
.side-item.active {
 background: var(--surface);
 color: var(--accent-ink);
 border-color: var(--line);
 box-shadow: var(--shadow-md);
}
.side-item .tag {
 margin-left: auto;
 font-size: 12px;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--muted);
 font-family: var(--font-mono);
}
/* Бейдж непрочитанных сообщений на пункте меню «Чат» */
.nav-badge {
 margin-left: auto;
 flex: none;
 min-width: 20px;
 height: 20px;
 padding: 0 6px;
 border-radius: var(--r-pill);
 background: var(--err);
 color: #fff;
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 700;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.side-item .nav-badge {
 margin-left: auto;
}
.bottom-item .nav-badge {
 position: absolute;
 top: 2px;
 right: calc(50% - 26px);
}
.bottom-item {
 position: relative;
}
.nav-badge.hot {
 /* Два удара при появлении, дальше статика (P1): бесконечная пульсация утомляла. */
 animation: badgePulse 1.2s var(--ease) 2;
}
@keyframes badgePulse {
 0%,
 100% {
  box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.5);
 }
 50% {
  box-shadow: 0 0 0 7px rgba(180, 35, 24, 0);
 }
}
.content {
 flex: 1;
 padding: 24px 24px 96px;
 min-width: 0;
}

/* ---------- Нижняя навигация (мобильные) ---------- */
.bottom {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 height: var(--bottom);
 z-index: 20;
 display: none;
 /* P2: вместо размытия — плотный фон (нижняя навигация) */
 background: var(--surface);
 border-top: 1px solid var(--line);
 padding-bottom: env(safe-area-inset-bottom);
}
.bottom-item {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 3px;
 justify-content: center;
 font-size: 12px;
 font-weight: 600;
 color: var(--muted);
 cursor: pointer;
 background: none;
 border: none;
 padding: 6px 2px;
}
.bottom-item .bi {
 width: 22px;
 height: 22px;
 display: grid;
 place-items: center;
}
.bottom-item.active {
 color: var(--accent-ink);
}

@media (max-width: 1024px) {
 .side {
  display: none;
 }
 .bottom {
  display: flex;
 }
 .content {
  padding: 16px 16px 96px;
 }
}

/* ---------- Контент ---------- */
.page-title {
 display: flex;
 align-items: baseline;
 gap: 14px;
 flex-wrap: wrap;
 margin-bottom: 4px;
}
.page-title h1 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 20px;
}
.page-desc {
 color: var(--ink-soft);
 font-size: 14px;
 margin: 2px 0 20px;
}

.kpis {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 12px;
 margin: 16px 0 24px;
}
.kpi {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 16px;
}
.kpi .k {
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--muted);
 font-weight: 700;
}
.kpi .v {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 26px;
 margin-top: 4px;
}
.kpi .v.muted {
 color: var(--line);
}

.panel {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 18px;
 margin-bottom: 16px;
}
/* Прошедшие без отметки (23.10.2026): короткий блок с действием — не должен
   теряться среди длинных списков, поэтому мягкий янтарный край. */
.meet-dangling {
 border-left: 3px solid var(--warn);
}
.block-title {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 15px;
 margin: 0 0 6px;
}

/* Оверлей/карточка квартиры */
.subtle {
 font-size: 13px;
 color: var(--muted);
}
.row-act {
 display: flex;
 align-items: center;
 gap: 8px;
}
.est-upload {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
 margin-top: 12px;
 padding: 12px;
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
}
.chk {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}
.est-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 margin: 4px 0 10px;
}
/* Пункты сметы (в стиле «Что сделано») */
.est-items {
 border: 1px solid var(--line-soft);
 border-radius: var(--r-md);
 padding: 4px 12px 10px;
 margin: 4px 0 6px;
 background: var(--surface-2);
}
.est-items .row-line {
 border-bottom: 1px dashed var(--line-soft);
 padding: 7px 0;
}
.est-items .row-line:last-child {
 border-bottom: none;
}
.est-section {
 font-size: 11px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 font-weight: 800;
 color: var(--accent-ink);
 margin: 10px 0 2px;
 font-family: var(--font-display);
}
.est-items .w-name {
 font-size: 13.5px;
}
.est-items .w-sub {
 font-size: 11px;
}
.est-total {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 margin-top: 8px;
 padding-top: 9px;
 border-top: 2px solid var(--line);
 font-weight: 800;
 font-size: 15px;
 color: var(--accent-ink);
}
/* Карточка сметы (сотрудник: карточка квартиры и страница «Сметы») */
.est-card {
 border: 1px solid var(--line-soft);
 border-radius: var(--r-md);
 padding: 2px 12px 8px;
 margin: 6px 0;
 background: var(--surface);
}
.est-card .est-head {
 border-bottom: 1px solid var(--line-soft);
 padding: 8px 0;
 margin: 0;
}
.est-card-body {
 margin-top: 4px;
}
/* Таблица сметы: название работы — полной строкой, под ним цифры
   (вертикальная раскладка: имя не ужимается, строки цифр с подписями) */
.smeta-table {
 border: 1px solid var(--line-soft);
 border-radius: var(--r-md);
 overflow: hidden;
 background: var(--surface-2);
 margin: 2px 0 6px;
}
.smeta-tr {
 padding: 8px 12px;
 border-bottom: 1px dashed var(--line-soft);
}
.smeta-tr:last-child {
 border-bottom: none;
}
.smeta-work {
 display: block;
}
.smeta-work-name {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 overflow-wrap: break-word;
 word-break: normal;
}
.smeta-work-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 4px 14px;
 align-items: baseline;
 margin-top: 5px;
}
.smeta-m-i {
 font-size: 12.5px;
 color: var(--muted);
 font-variant-numeric: tabular-nums;
}
.smeta-m-sum {
 margin-left: auto;
 font-size: 14px;
 font-weight: 800;
 color: var(--accent-ink);
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.smeta-td-name {
 font-size: 13.5px;
 font-weight: 600;
 min-width: 0;
 overflow-wrap: break-word;
}
.smeta-td-num {
 font-size: 13px;
 color: var(--muted);
 text-align: right;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
}
.smeta-td-sum {
 font-size: 13.5px;
 font-weight: 700;
 text-align: right;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
}
.smeta-section {
 background: var(--surface);
}
.smeta-section .smeta-td-name {
 font-size: 11px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 font-weight: 800;
 color: var(--accent-ink);
 font-family: var(--font-display);
 padding: 1px 0;
}
.smeta-total {
 border-top: 2px solid var(--line);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}
.smeta-total .smeta-td-name {
 font-weight: 800;
 font-size: 14px;
 color: var(--accent-ink);
}
.smeta-total .smeta-td-sum {
 font-weight: 800;
 font-size: 15px;
 color: var(--accent-ink);
 text-align: right;
 white-space: nowrap;
}
.smeta-hint {
 font-size: 12px;
 color: var(--muted);
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-10);
 padding: 8px 12px;
 margin: 2px 0 8px;
}
.smeta-empty,
.smeta-old {
 font-size: 12.5px;
 color: var(--muted);
 font-style: italic;
 margin: 4px 0;
}
.smeta-old {
 font-size: 11px;
}
.row-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 8px;
}
.mat-cat {
 margin-bottom: 10px;
}
.mat-title {
 font-size: 12px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 font-weight: 800;
 color: var(--accent-ink);
 margin: 6px 0 2px;
}
.mat-line {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 align-items: baseline;
 padding: 1px 0;
}
.mat-name {
 font-weight: 600;
}
.mat-where {
 font-size: 12px;
 color: var(--muted);
}
.overlay {
 position: fixed;
 inset: 0;
 z-index: 40;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 16px;
 background: rgba(31, 42, 46, 0.45);
 backdrop-filter: blur(3px);
}
.drawer {
 width: 100%;
 max-width: 1080px;
 max-height: 92vh;
 overflow: auto;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-lg);
 padding: 22px;
 box-shadow: 0 20px 40px -12px rgba(31, 42, 46, 0.4);
}
.drawer-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 margin-bottom: 14px;
}
.row-line {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 padding: 9px 0;
 border-bottom: 1px solid var(--line-soft);
}
.w-name {
 font-weight: 600;
}
.w-sub {
 font-size: 12px;
 color: var(--muted);
 font-family: var(--font-mono);
}
.w-cost {
 font-family: var(--font-mono);
 font-size: 14px;
 font-weight: 600;
 white-space: nowrap;
}
.note-line {
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-sm);
 padding: 8px 12px;
 font-size: 13px;
 color: var(--ink-soft);
 margin: 12px 0;
}
.muted {
 color: var(--muted);
}

/* Пустые состояния */
.empty {
 background: var(--surface);
 border: 1px dashed var(--line);
 border-radius: var(--r-md);
 padding: 32px 20px;
 text-align: center;
 color: var(--muted);
}
.empty-title {
 font-weight: 700;
 color: var(--ink-soft);
 margin: 0 0 6px;
}

/* Список квартир — «журнальные строки» */
.search-row {
 display: flex;
 gap: 10px;
 margin-bottom: 14px;
}
.search-row input {
 flex: 1;
 max-width: 360px;
 min-height: 44px;
 padding: 0 14px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 font-size: 15px;
 background: var(--surface);
}
.list-head,
.apt-row {
 display: grid;
 grid-template-columns: 84px 1fr 160px 120px;
 gap: 12px;
 align-items: center;
}
.list-head {
 padding: 6px 14px;
 font-size: 12px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 700;
}
.apt-row {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 padding: 10px 14px;
 margin-bottom: 8px;
 cursor: pointer;
 transition:
  border-color 0.15s,
  box-shadow 0.15s;
}
.apt-row:hover {
 border-color: var(--accent-bright);
 box-shadow: var(--shadow-md);
}
.apt-row.has-unread {
 border-color: #e7b8a0;
 background: linear-gradient(0deg, #fff9f5, var(--surface));
 box-shadow: inset 3px 0 0 var(--err);
}
.apt-num {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 19px;
 color: var(--ink);
}
.apt-name {
 font-weight: 600;
}
.apt-sub {
 font-size: 13px;
 color: var(--muted);
 margin-top: 2px;
}
.mono {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--ink-soft);
}
@media (max-width: 768px) {
 .list-head {
  display: none;
 }
 .apt-row {
  grid-template-columns: 76px 1fr;
  gap: 4px 14px;
 }
 /* На телефоне всё, кроме номера, — во вторую (широкую) колонку, иначе
    статус-плашка попадает в узкую колонку 76px и наезжает на текст. */
 .apt-row > .apt-num {
  grid-column: 1;
 }
 .apt-row > :nth-child(2) {
  grid-column: 2;
 }
 .apt-row > :nth-child(n + 3) {
  grid-column: 2;
 }
}

/* Раздел «Чат» (30.09.2026): поиск по номеру квартиры + флажки «прочитано».
   Флажок — первая колонка строки; это ОТДЕЛЬНЫЙ класс (.chat-row), чтобы не
   ломать «журнальную» сетку обычных списков квартир и её мобильные правила. */
.list-head.chat-head,
.apt-row.chat-row {
 grid-template-columns: 34px 84px 1fr 160px 120px;
}
.chat-check {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 cursor: pointer;
}
.chat-check input {
 width: 22px;
 height: 22px;
 cursor: pointer;
 margin: 0;
}
/* На телефоне обычные строки — «76px 1fr»; у строки чата первая колонка
   отдана флажку, поэтому правило переопределяем с большей точностью. */
@media (max-width: 768px) {
 .apt-row.chat-row {
  grid-template-columns: 34px 72px 1fr;
 }
 .apt-row.chat-row > .chat-check {
  grid-column: 1;
  grid-row: 1 / span 3;
 }
 .apt-row.chat-row > .apt-num {
  grid-column: 2;
 }
 .apt-row.chat-row > :nth-child(n + 3) {
  grid-column: 3;
 }
}
.chat-bar {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin-bottom: 10px;
}
.chat-picked {
 font-size: 13px;
 font-weight: 700;
 color: var(--accent);
}
.chat-status {
 margin-bottom: 8px;
}

/* Прогресс-этапы (клиент) */
.rail {
 display: flex;
 flex-direction: column;
 gap: 2px;
 margin-top: 10px;
}
.stage {
 display: flex;
 gap: 14px;
 align-items: flex-start;
 position: relative;
 padding-bottom: 6px;
}
.stage:not(:last-child)::before {
 content: "";
 position: absolute;
 left: 13px;
 top: 30px;
 bottom: -2px;
 width: 2px;
 background: var(--line);
}
.stage-dot {
 width: 28px;
 height: 28px;
 flex: none;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-size: 13px;
 font-weight: 700;
 background: var(--surface);
 border: 2px solid var(--line);
 color: var(--muted);
 z-index: 1;
}
.stage.done .stage-dot {
 background: var(--ok);
 border-color: var(--ok);
 color: #fff;
}
.stage.current .stage-dot {
 border-color: var(--accent-bright);
 color: var(--accent-ink);
 background: var(--warn-bg);
 animation: pulse 2s infinite;
}
@keyframes pulse {
 0%,
 100% {
  box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.35);
 }
 50% {
  box-shadow: 0 0 0 6px rgba(217, 119, 6, 0);
 }
}
.stage-name {
 font-weight: 600;
 padding-top: 3px;
}
.stage-date {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--muted);
}

/* Клиентская карточка: зоны-карточки (Вариант 1+2) */
.client-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 14px 16px;
 border-bottom: 1px solid var(--line);
 background: rgba(255, 255, 255, 0.6);
}
.client-privacy {
 font-size: 12px;
 color: var(--muted);
 font-family: var(--font-mono);
}
.client-wrap {
 max-width: 680px;
 margin: 0 auto;
 padding: 20px 16px 60px;
}
.client-card {
 background: transparent;
 border: 0;
 padding: 0;
 box-shadow: none;
}

/* Обложка-паспорт квартиры */
.hero {
 position: relative;
 overflow: hidden;
 border-radius: 18px;
 padding: 20px 18px 18px;
 margin-bottom: 14px;
 color: #fff;
 background: linear-gradient(135deg, #0b7a56 0%, var(--brand-800) 55%, #065f46 100%);
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
  0 12px 24px -12px rgba(4, 120, 87, 0.6);
 animation: fadeUp 0.3s ease both;
}
.hero::after {
 content: "";
 position: absolute;
 right: -46px;
 top: -46px;
 width: 190px;
 height: 190px;
 border-radius: 50%;
 background: radial-gradient(
  circle,
  rgba(255, 255, 255, 0.16) 0,
  rgba(255, 255, 255, 0) 70%
 );
}
.hero .label {
 color: rgba(255, 255, 255, 0.75);
 letter-spacing: 0.1em;
}
.hero .apt-num {
 color: #fff;
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(38px, 11vw, 56px);
 line-height: 1;
 letter-spacing: -0.02em;
 margin-top: 2px;
}
.hero .pill {
 background: rgba(255, 255, 255, 0.24);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero .pill::before {
 background: #ffd9a0;
}
.hero .apt-meta {
 margin: 16px 0 0;
 gap: 8px;
}
.hero .chip {
 background: rgba(255, 255, 255, 0.2);
 border: 1px solid rgba(255, 255, 255, 0.3);
 color: #fff;
}
.hero .chip-k {
 color: rgba(255, 255, 255, 0.65);
}
.hero .chip span:last-child {
 font-weight: 700;
}
.apt-head {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 16px;
 flex-wrap: wrap;
}
.apt-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 18px 0 6px;
}
.chip {
 background: var(--surface-2);
 border: 1px solid var(--line);
 border-radius: var(--r-pill);
 padding: 6px 13px;
 font-size: 13px;
 font-weight: 600;
}
.chip-k {
 display: block;
 font-size: 12px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 700;
}

/* Зона-карточка: белая поверхность + цветной кант слева */
.zone {
 position: relative;
 overflow: hidden;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-14);
 padding: 16px 16px 14px;
 margin: 0 0 14px;
 box-shadow: 0 2px 10px -6px rgba(4, 120, 87, 0.22);
 animation: fadeUp 0.3s ease both;
}
.zone::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 5px;
 background: var(--zc, var(--ok));
}
.zone-head {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 12px;
}
.zs-spacer {
 flex: 1 1 auto;
}
/* SVG-иконки из инлайн-спрайта (lucide): наследуют цвет, размер задаёт контейнер */
.ic {
 width: 20px;
 height: 20px;
 display: block;
 color: currentColor;
 flex: none;
}
.bottom-item .bi .ic {
 width: 22px;
 height: 22px;
}
.side-item .nav-ic .ic {
 width: 20px;
 height: 20px;
}
.zi .ic {
 width: 18px;
 height: 18px;
}
.ic-sprite {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}

.zi {
 flex: none;
 width: 32px;
 height: 32px;
 border-radius: var(--r-10);
 display: grid;
 place-items: center;
 color: #fff;
 font-size: 15px;
 font-weight: 800;
 background: var(--zc, var(--ok));
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.35),
  0 3px 8px -3px var(--zc, var(--ok));
}
.zt {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 15px;
 margin: 0;
 letter-spacing: -0.01em;
 color: var(--ink);
}
.zs {
 margin-left: auto;
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--muted);
 letter-spacing: 0.02em;
 text-align: right;
 line-height: 1.3;
}
/* Сворачивание зоны кликом по заголовку (длинные блоки: работы/материалы/сметы) */
.zone-toggle {
 flex: none;
 min-width: 26px;
 height: 26px;
 border-radius: var(--r-xs);
 border: 1px solid var(--line-soft);
 background: var(--surface-2);
 color: var(--muted);
 font-size: 13px;
 line-height: 1;
 cursor: pointer;
 padding: 0;
}
.zone-toggle:hover {
 color: var(--ink);
 border-color: var(--line);
}
.zone.collapsed > *:not(.zone-head) {
 display: none;
}
.zone.collapsed .zone-head {
 margin-bottom: 0;
}
.z-chat {
 --zc: #0e7490;
}
.z-works {
 --zc: #2f7d4a;
}
.z-book {
 --zc: var(--accent);
}
.z-est {
 --zc: #a16207;
}
.z-mat {
 --zc: #64748b;
}
/* Чат в карточке квартиры — сразу под шапкой (пишет прораб/менеджер без прокрутки) */
/* Ограничение max-height убираем: при многих сообщениях оно резало нижнюю
   часть (поле отправки). Сообщения скроллятся внутри .chat (свой max-height). */
.z-chat-top {
 display: flex;
 flex-direction: column;
 padding-bottom: 16px;
}
.z-chat-top .chat {
 flex: 0 1 auto;
 min-height: 180px;
 max-height: 60vh;
}
.z-chat-top .chat-form {
 flex: none;
}
.zone-subhead {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 13px;
 color: var(--ink-soft);
 margin: 14px 0 4px;
 padding-top: 12px;
 border-top: 1px dashed var(--line-soft);
 letter-spacing: -0.01em;
}

/* Напоминание о записи: показывается при входе, плавно исчезает (не липнет) */
.reminder {
 background: linear-gradient(180deg, #fffbf0, #fcf3e2);
 border: 1px solid #efd9ac;
 border-radius: var(--r-14);
 box-shadow: 0 8px 20px -10px rgba(180, 83, 9, 0.45);
 margin: 0 0 14px;
 padding: 12px 14px;
 animation: remIn 0.35s ease both;
 transition:
  opacity 0.45s ease,
  transform 0.45s ease;
}
.reminder.rem-out {
 opacity: 0;
 transform: translateY(-6px);
 pointer-events: none;
}
@keyframes remIn {
 from {
  opacity: 0;
  transform: translateY(-8px);
 }
 to {
  opacity: 1;
  transform: none;
 }
}
.rem-row {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}
.rem-ic {
 flex: none;
 width: 38px;
 height: 38px;
 border-radius: 11px;
 display: grid;
 place-items: center;
 color: #fff;
 font-size: 17px;
 font-weight: 800;
 background: linear-gradient(135deg, #d97706, var(--accent));
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.35),
  0 4px 10px -4px rgba(180, 83, 9, 0.6);
}
.rem-body {
 flex: 1;
 min-width: 180px;
}
.rem-t1 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 13.5px;
 color: #92400e;
}
.rem-t2 {
 font-size: 13.5px;
 color: var(--ink);
 font-weight: 600;
 margin-top: 1px;
}
.rem-row .pill {
 flex: none;
 font-size: 12px;
}

/* Подсказка «здесь можно общаться» — крупная плашка над чатом у клиента */
.chat-hint {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 0 0 12px;
 padding: 12px 14px;
 background: linear-gradient(135deg, #eafaf5, #e3f3ff);
 border: 1px solid #a9e0cd;
 border-radius: var(--r-14);
 box-shadow: 0 8px 20px -12px rgba(14, 116, 144, 0.5);
 opacity: 0;
 transform: translateY(-6px);
 transition:
  opacity 0.4s ease,
  transform 0.4s ease;
}
.chat-hint.chat-hint-show {
 opacity: 1;
 transform: translateY(0);
}
.chat-hint.chat-hint-out {
 opacity: 0;
 transform: translateY(-6px);
 pointer-events: none;
}
.chat-hint-ic {
 flex: none;
 width: 40px;
 height: 40px;
 border-radius: var(--r-md);
 display: grid;
 place-items: center;
 color: #fff;
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.35),
  0 4px 10px -4px rgba(4, 120, 87, 0.6);
}
.chat-hint-ic .ic {
 width: 22px;
 height: 22px;
}
/* ── Фото Анастасии вместо буквы-заглушки (владелица, 13.10.2026) ─────────
    Кружок стоит в ШАПКЕ сообщения, рядом с именем — компактно, как в
    мессенджерах. Крупный аватар слева (46 px + пузырь 62 px) превращал
    переписку в «стену» одинаковых блоков — владелица назвала это «кашей».
    Размер и форма дублируются inline в addBotAvatar(), поэтому вид не зависит
    от версии файла стилей. */
.chat-hint-ic-av {
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: none;
 box-shadow: 0 3px 10px -3px rgba(4, 120, 87, 0.55);
 overflow: hidden;
}
.chat-hint-av {
 width: 52px;
 height: 52px;
 border-radius: 50%;
 object-fit: cover;
 display: block;
}
.chat-av {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 object-fit: cover;
 flex: none;
 align-self: center;
 background: #e8f7f0;
}
@media (max-width: 480px) {
 .chat-av {
  width: 26px;
  height: 26px;
 }
}
.chat-hint-txt {
 font-size: 14.5px;
 font-weight: 700;
 color: var(--accent-ink);
 line-height: 1.35;
}

/* Вспышка зоны чата при новом сообщении (клиент) */
.zone.flash {
 animation: zoneFlash 1.8s ease;
}
@keyframes zoneFlash {
 0% {
  box-shadow: 0 0 0 0 rgba(14, 148, 136, 0);
  background: #f4fcfa;
 }
 25% {
  box-shadow: 0 0 0 6px rgba(14, 148, 136, 0.35);
 }
 100% {
  box-shadow: 0 0 0 0 rgba(14, 148, 136, 0);
 }
}

.cur-note {
 margin-top: 12px;
 background: var(--warn-bg);
 border: 1px dashed var(--accent-bright);
 border-radius: var(--r-10);
 padding: 9px 12px;
 font-size: 13.5px;
 font-weight: 600;
 color: var(--accent-ink);
}
.foot-note {
 margin-top: 14px;
 color: var(--muted);
 font-size: 12.5px;
 border-top: 1px dashed var(--line);
 padding-top: 12px;
 text-align: center;
}

/* v175: заметная плашка в блоке «Что сделано» — данные по работам обновляются
   раз в неделю, по пятницам. Раньше это было мелкой строкой в самом низу
   карточки, и клиенты её не замечали (владелица, 22.09.2026).
   Цвета — из палитры приложения (спокойный зелёный «всё в порядке»). */
.week-note {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 margin: 12px 0 14px;
 padding: 12px 14px;
 border-radius: var(--r-md);
 background: var(--ok-bg);
 border-left: 4px solid var(--ok);
 color: var(--ink);
}
.week-note .wn-ic {
 font-size: 18px;
 line-height: 1.25;
 flex: 0 0 auto;
}
.week-note .wn-body {
 display: block;
 min-width: 0;
}
.week-note b {
 display: block;
 font-weight: 700;
 font-size: 15px;
 line-height: 1.35;
 margin-bottom: 3px;
}
.week-note .wn-sub {
 display: block;
 color: var(--ink-soft);
 font-size: 14px;
 line-height: 1.45;
}
@media (max-width: 480px) {
 .week-note {
  padding: 11px 12px;
  gap: 8px;
 }
 .week-note b {
  font-size: 14.5px;
 }
 .week-note .wn-sub {
  font-size: 13.5px;
 }
}

/* Подпись студии-разработчика.
   ⚙️ СКРЫТА (решение владелицы, 06.09: «рано показывать»).
   Чтобы вернуть: замените display:none ниже на display:flex. */
.studio-credit {
 display: none;
 align-items: center;
 justify-content: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 8px;
 padding: 14px 12px 26px;
 font-family: var(--font-mono);
 font-size: 12px;
 letter-spacing: 0.08em;
 color: var(--muted);
 text-align: center;
 user-select: none;
}
.studio-credit::before {
 content: "";
 width: 34px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--line));
}
.studio-credit::after {
 content: "";
 width: 34px;
 height: 1px;
 background: linear-gradient(90deg, var(--line), transparent);
}
.studio-credit .sc-label {
 text-transform: uppercase;
 font-size: 12px;
 letter-spacing: 0.16em;
}
.studio-credit .sc-name {
 font-weight: 800;
 letter-spacing: 0.06em;
 color: var(--accent-ink);
}
.view-login .studio-credit {
 margin-top: 0;
 padding: 4px 12px 6px;
}
@media (max-width: 768px) {
 .studio-credit {
  padding: 14px 12px 90px;
 } /* место под нижней навигацией в приложении */
 .view-login .studio-credit {
  padding: 4px 12px 8px;
 }
}
@media (max-width: 560px) {
 .studio-credit {
  font-size: 12px;
 }
}
@media (max-width: 640px) {
 .hero {
  border-radius: 15px;
  padding: 16px 14px;
 }
 .zs {
  display: none;
 }
 .zone {
  padding: 14px 14px 12px;
 }
}

/* Дорожная карта этапов запуска (владелица) */
.roadmap {
 display: flex;
 flex-direction: column;
 gap: 0;
}
.road {
 display: flex;
 gap: 14px;
 padding: 8px 0;
}
.road-dot {
 width: 26px;
 height: 26px;
 flex: none;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 700;
}
.road.done .road-dot {
 background: var(--ok);
 color: #fff;
}
.road.now .road-dot {
 background: var(--accent);
 color: #fff;
}
.road.next .road-dot {
 background: var(--surface);
 border: 2px dashed var(--line);
 color: var(--muted);
}
.road-title {
 font-weight: 700;
}
.road-sub {
 font-size: 13px;
 color: var(--muted);
}

/* Чат */
.chat {
 display: flex;
 flex-direction: column;
 /* ВНИМАНИЕ: gap во flex поддерживают не все браузеры (Safari до 14 и
    старые оболочки его игнорируют) — тогда сообщения идут ВПЛОТНУЮ, и во всех
    чатах это выглядит как «каша» (жалоба владелицы 13.10.2026). Поэтому
    отступы — через margin, а не через gap: работает везде одинаково. */
 /* gap: 8px; */
 /* v129: выше — фото в переписке чаще видны без прокрутки (было 520px) */
 max-height: min(74vh, 900px);
 overflow: auto;
 padding: 4px 2px;
 margin: 8px 0;
}
/* Отступ между сообщениями — одинаковый на любом браузере. */
.chat > * + * {
 margin-top: 8px;
}
/* ── «Анастасия расскажет»: голосовые подсказки в кабинете клиента ───────── */
.z-voice .voice-intro {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 10px;
}
/* ── Сворачивание блока (владелица, 13.10.2026) ─────────────────────────
   Первый заход — блок РАЗВЁРНУТ (чтобы не пролистали и послушали).
   После — сворачивается в маленькую плашку (состояние помнит localStorage),
   но остаётся на виду: знаешь, куда зайти, если что-то забыл. */
.voice-toggle {
 flex: none;
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--accent-ink);
 font: inherit;
 font-size: 13px;
 font-weight: 700;
 padding: 6px 12px;
 border-radius: var(--r-pill);
 cursor: pointer;
}
.voice-toggle:hover {
 background: #eef8f2;
}
.z-voice.collapsed .voice-intro,
.z-voice.collapsed .voice-list {
 display: none;
}
.z-voice.collapsed {
 padding-bottom: 10px;
}
.z-voice.collapsed .zone-head {
 margin-bottom: 0;
}
.voice-face {
 width: 76px;
 height: 76px;
 border-radius: 50%;
 object-fit: cover;
 flex: none;
 box-shadow: 0 6px 16px -8px rgba(4, 120, 87, 0.7);
 border: 2px solid #fff;
}
.voice-lead {
 font-size: 14px;
 line-height: 1.45;
 color: var(--ink-soft);
}
.voice-total {
 display: block;
 margin-top: 4px;
 font-size: 12.5px;
 font-weight: 700;
 color: var(--accent-ink);
}
.voice-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.voice-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 border: 1px solid var(--line-soft);
 border-radius: var(--r-md);
 padding: 10px 12px;
 background: var(--surface-2);
}
.voice-num {
 flex: none;
 width: 26px;
 height: 26px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-size: 12px;
 font-weight: 800;
 color: #fff;
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
}
/* Презентация приложения целиком — заметная первая строка блока (владелица 13.10.2026) */
.voice-item.voice-present {
 border-color: var(--brand-500);
 background: linear-gradient(135deg, rgba(15, 185, 129, 0.14), rgba(4, 120, 87, 0.06));
}
.voice-num-play {
 font-size: 13px;
}
.voice-item.voice-present .voice-t {
 font-size: 15px;
}
.voice-body {
 flex: 1;
 min-width: 0;
}
.voice-t {
 font-weight: 700;
 font-size: 14px;
}
.voice-s {
 font-size: 12.5px;
 color: var(--muted);
 margin-top: 3px;
 line-height: 1.4;
}
.voice-side {
 flex: none;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 6px;
}
.voice-dur {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--muted);
}
.voice-media {
 margin-top: 8px;
 width: 100%;
}
.voice-media audio,
.voice-media video {
 width: 100%;
 border-radius: var(--r-10);
}
/* Плеер на телефоне: родной <audio> растягивается в пустую плашку —
   ограничиваем высоту и ширину, чтобы выглядел аккуратно (владелица 14.10.2026). */
.voice-media audio {
 max-width: 340px;
 height: 38px;
}
/* Части темы (ДУБЛИ до 30 секунд) — для видео-презентации;
   полная версия темы остаётся сверху — для тех, кто просто слушает. */
.voice-parts {
 margin-top: 10px;
 border-top: 1px dashed var(--line);
 padding-top: 8px;
}
.voice-parts-h {
 font-size: 12px;
 font-weight: 700;
 color: var(--muted);
 margin-bottom: 6px;
}
.voice-part {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 padding: 6px 0;
}
.voice-part-body {
 flex: 1;
 min-width: 0;
}
.voice-part-t {
 font-size: 13.5px;
 font-weight: 600;
}
.voice-part-acts {
 flex: none;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 4px;
}
@media (max-width: 480px) {
 .voice-face {
  width: 62px;
  height: 62px;
 }
 .voice-part {
  flex-direction: column;
 }
 .voice-part-acts {
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
 }
}
/* На телефоне широкая кнопка «Послушать целиком» сжимала текст темы в узкую
   колонку — переносим кнопку и длительность в отдельную строку под текстом
   (владелица 14.10.2026). */
@media (max-width: 560px) {
 .voice-item {
  flex-wrap: wrap;
 }
 .voice-side {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
 }
 .voice-item.voice-present .voice-side {
  align-items: center;
 }
}
.chat-msg {
 max-width: 85%;
 align-self: flex-start;
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-md);
 padding: 8px 12px;
}
.chat-msg.mine {
 align-self: flex-end;
 background: #fdf3e3;
 border-color: #f0ddc0;
}
/* сообщение адресовано лично мне (прорабу/менеджеру) */
.chat-msg.to-me {
 outline: 2px solid var(--accent);
 outline-offset: 1px;
 background: #fffdf6;
}
.tag-target {
 background: #fde9c8;
 color: #8a5a00;
 border-radius: var(--r-sm);
 padding: 1px 7px;
 font-size: 12px;
 font-weight: 700;
}
.tag-target-me {
 background: var(--accent);
 color: #fff;
}
.chat-meta {
 display: flex;
 /* gap убран: в старых браузерах не работает — отступы через margin-right */
 /* gap: 8px; */
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 2px;
}
.chat-meta > *:not(:last-child) {
 margin-right: 8px;
}
.chat-who {
 font-weight: 700;
 font-size: 13px;
}
.chat-time {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--muted);
 margin-left: auto;
}
.chat-text {
 font-size: 15px;
 white-space: pre-wrap;
}
.chat-img {
 /* v133: ФИКСИРОВАННАЯ рамка. Раньше высоту задавало само фото: пока грузилось,
    на месте была маленькая плашка (~35px), потом картинка раздувалась до ~250px
    и переписка съезжала — владелица: «чат висит на фото, текст внизу перекидывает
    на картинку» (13.09.2026). Теперь плашка и фото занимают одно и то же место. */
 /* квадратная рамка: фото с телефона вертикальные — так они крупнее */
 width: 220px;
 height: 220px;
 object-fit: contain;
 background: var(--surface-2);
 border-radius: var(--r-sm);
 margin-top: 6px;
 display: block;
}
.chat-link {
 display: inline-block;
 margin-top: 4px;
 color: var(--accent-ink);
 font-weight: 600;
 font-size: 14px;
}
/* Вложения-файлы открываем КНОПКОЙ (а не ссылкой): переход по обычной <a>
   не несёт заголовок авторизации, и сервер отвечал 401 — файлы клиентов
   «не открывались» (владелица 12.09.2026). */
button.chat-link {
 border: none;
 background: none;
 padding: 0;
 font: inherit;
 font-weight: 600;
 font-size: 14px;
 color: var(--accent-ink);
 text-align: left;
 cursor: pointer;
}
button.chat-link:hover {
 text-decoration: underline;
}
.chat-file-row {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 4px;
}
.chat-file-row .chat-link {
 margin-top: 0;
}
.chat-dl {
 white-space: nowrap;
 padding: 4px 10px;
 font-size: 12.5px;
}
/* Кнопки-действия под сообщением Анастасии (согласование сметы → договор/оплата,
   30.09.2026): «Записаться в офис» и «Оплатить онлайн». */
.chat-acts {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 10px;
 align-items: center;
}
.chat-act {
 border: 1px solid var(--accent);
 background: var(--surface);
 color: var(--accent-ink);
 font: inherit;
 font-weight: 600;
 font-size: 13.5px;
 padding: 8px 14px;
 border-radius: var(--r-pill);
 cursor: pointer;
}
.chat-act:hover {
 background: var(--surface-2);
}
.chat-act:disabled {
 opacity: 0.55;
 cursor: default;
}
.chat-act-note {
 font-size: 13px;
 color: var(--muted);
}
/* Подсказка СОТРУДНИКУ: какие кнопки увидел клиент под сообщением Анастасии
   (в кабинете клиента это живые кнопки, здесь — серая пометка, 30.09.2026). */
.chat-act-hint {
 margin-top: 8px;
 display: inline-block;
 padding: 6px 10px;
 font-size: 12.5px;
 color: var(--muted);
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
}
.chat-form {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 align-items: center;
 margin-top: 6px;
}
.chat-form input[type="text"] {
 flex: 1 1 140px;
 min-width: 120px;
 min-height: 40px;
 padding: 0 12px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 font-size: 15px;
 background: var(--surface);
}
.chat-form select {
 min-height: 40px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 background: var(--surface);
 font-size: 13px;
 padding: 0 6px;
}
/* Клиентский композер: широкое многострочное поле + панель с выбором «Кому» */
.chat-form-client {
 flex-direction: column;
 align-items: stretch;
 gap: 6px;
}
.chat-form-client textarea {
 width: 100%;
 box-sizing: border-box;
 min-height: 52px;
 max-height: 190px;
 padding: 10px 12px;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 font-size: 15px;
 line-height: 1.45;
 background: var(--surface);
 resize: none;
}
.chat-form-client textarea:focus {
 outline: 2px solid var(--accent-bright);
 outline-offset: -1px;
}
.chat-form-bar {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}
.chat-form-bar select {
 min-height: 38px;
 flex: 1 1 210px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 background: var(--surface);
 font-size: 14px;
 padding: 0 8px;
}
.chat-form-spacer {
 flex: 1 1 auto;
}
.chat-form-bar .btn {
 white-space: nowrap;
}
.chat-att {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 max-width: 100%;
 padding: 3px 8px 3px 10px;
 border: 1px solid var(--line);
 border-radius: var(--r-pill);
 background: var(--surface-2);
 font-size: 12.5px;
 color: var(--ink-soft);
}
.chat-att .chat-att-ic {
 font-size: 13px;
 line-height: 1;
}
.chat-att-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 max-width: min(46vw, 260px);
}
.chat-att .chat-del {
 margin-left: 2px;
 width: 20px;
 height: 20px;
}
/* Несколько вложений в одном сообщении (12.09.2026): строки выбранных файлов,
   переносятся по строкам и не распирают композер. */
.chat-files {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 6px 0 0;
}
.chat-files .chat-att {
 max-width: 100%;
}
.chat-who {
 font-size: 12px;
 color: var(--muted);
}
.chat-who summary {
 cursor: pointer;
 user-select: none;
 padding: 2px 0;
}
.chat-who summary:hover {
 color: var(--accent-ink);
}
.chat-who-min {
 opacity: 0.75;
}
.chat-who[open] summary .chat-who-min {
 display: none;
}
.chat-who-body {
 margin-top: 2px;
 padding: 8px 10px;
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
 background: var(--surface-2);
 line-height: 1.45;
}
.chat-who-body p {
 margin: 4px 0;
}
.rec-note {
 margin-top: 8px;
 background: var(--warn-bg);
 border: 1px dashed var(--accent-bright);
 border-radius: var(--r-sm);
 padding: 8px 12px;
 font-size: 13px;
}

/* Офлайн */
.off-chip {
 font-family: var(--font-mono);
 font-size: 12px;
 color: #fff;
 background: var(--err);
 padding: 4px 10px;
 border-radius: var(--r-pill);
 font-weight: 700;
}

.apt-note {
 font-size: 12px;
 color: var(--ink-soft);
 margin-top: 2px;
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-sm);
 padding: 4px 8px;
 display: inline-block;
}

/* ============================================================
   ТЕМА «ИЗУМРУД» — насыщенный изумруд + пастельно-мятный фон
   ============================================================ */
:root {
 --bg: #eef5f0; /* пастельный мятный фон */
 --bg-grid: rgba(4, 120, 87, 0.05);
 --surface: #ffffff;
 --surface-2: #f4faf6;
 --ink: #12352c;
 --ink-soft: #3e5c50;
 --muted: #587065; /* P2: было #7e9a8d — контраст 2.75:1, стало 4.83:1 */
 --line: #d9e8de;
 --line-soft: #e7f1ea;
 --accent: var(--brand-800); /* насыщенный изумруд */
 --accent-bright: #10b981;
 --accent-ink: #04513b;
 --ok: #0e9f6e;
 --ok-bg: #dff3ea;
 --err-bg: #fbe9e7;
 --warn-bg: #fbefe1;
}
body {
 background: linear-gradient(180deg, #f4f9f5 0%, #eef5f0 40%, #e8f2ec 100%);
 background-attachment: fixed;
}
.topbar {
 background: rgba(238, 245, 240, 0.9);
}
.brand-stamp {
 background: linear-gradient(135deg, #10b981 0%, var(--brand-800) 60%, #03543f 100%);
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.35),
  inset 0 -2px 4px rgba(0, 0, 0, 0.15),
  0 4px 10px -2px rgba(4, 120, 87, 0.5);
}
.brand-text {
 color: var(--accent-ink);
}

/* Объёмные кнопки */
.btn-primary {
 background: linear-gradient(180deg, #14b88a 0%, var(--brand-700) 55%, var(--brand-800) 100%);
 color: #fff;
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.4),
  inset 0 -2px 5px rgba(0, 0, 0, 0.12),
  0 4px 0 var(--brand-900),
  0 6px 14px -4px rgba(4, 120, 87, 0.45);
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
 transition:
  transform 0.12s ease,
  box-shadow 0.12s ease,
  filter 0.15s;
}
.btn-primary:hover {
 filter: brightness(1.06);
 transform: translateY(-2px);
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.4),
  inset 0 -2px 5px rgba(0, 0, 0, 0.12),
  0 6px 0 var(--brand-900),
  0 10px 18px -6px rgba(4, 120, 87, 0.5);
}
.btn-primary:active {
 transform: translateY(3px);
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.3),
  inset 0 2px 6px rgba(0, 0, 0, 0.18),
  0 1px 0 var(--brand-900);
}
.btn-ghost {
 background: var(--surface);
 color: var(--ink-soft);
 border-color: var(--line);
 box-shadow: 0 1px 2px rgba(15, 80, 60, 0.08);
 transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn-ghost:hover {
 border-color: var(--accent-bright);
 color: var(--accent-ink);
 transform: translateY(-1px);
}

/* Подъём карточек — ТОЛЬКО на первой отрисовке (P0, 17.10.2026): раньше карточки
   «всплывали» заново при каждом обновлении данных (чат опрашивается каждые 15 с).
   Класс booted ставит app.js через 600 мс после старта приложения. */
body:not(.booted) .panel,
body:not(.booted) .kpi,
body:not(.booted) .apt-row,
body:not(.booted) .login-card,
body:not(.booted) .client-card,
body:not(.booted) .side-item.active {
 animation: fadeUp var(--dur-3) var(--ease) both;
}
.kpi,
.apt-row {
 transition:
  transform 0.15s ease,
  box-shadow 0.15s ease,
  border-color 0.15s;
}
.kpi:hover,
.apt-row:hover {
 transform: translateY(-2px);
 border-color: var(--accent-bright);
 box-shadow: 0 10px 20px -8px rgba(4, 120, 87, 0.25);
}
.side-item.active {
 color: var(--accent-ink);
 border-color: var(--line);
 box-shadow: 0 2px 8px -2px rgba(4, 120, 87, 0.18);
}
.pill-ok {
 background: var(--ok-bg);
 color: var(--accent-ink);
}
.chat-msg.mine {
 background: #e8f6ef;
 border-color: #bfe3d2;
}
.stage.current .stage-dot {
 border-color: var(--accent-bright);
 color: var(--accent-ink);
 background: var(--ok-bg);
}
.apt-num.big {
 color: var(--accent-ink);
}
.apt-num {
 color: var(--accent-ink);
}
.mat-title {
 color: var(--accent-ink);
}
.tag {
 color: var(--muted);
}
.foot-note,
.login-hint {
 color: var(--muted);
}
/* «Уменьшить движение»: останавливаем ВСЁ, включая бесконечные анимации
   (блик на кнопках, пульс бейджей, точки «печатает») — P0, 17.10.2026. */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
 }
}
@keyframes fadeUp {
 from {
  opacity: 0;
  transform: translateY(6px);
 }
 to {
  opacity: 1;
  transform: none;
 }
}

/* ============================================================
   ТИПОГРАФИКА 2.0 + ГЛАВНОЕ МЕНЮ + «живая» кнопка
   ============================================================ */
:root {
 --font-ui:
  "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 --font-display: "Montserrat", "Golos Text", system-ui, sans-serif;
}
body {
 font-family: var(--font-ui);
}
h1,
h2,
h3 {
 font-family: var(--font-display);
}
.page-title h1 {
 font-weight: 700;
 font-size: 22px;
}
.block-title {
 font-weight: 700;
 font-size: 15px;
}
.apt-num,
.apt-num.big,
.kpi .v {
 font-weight: 800;
}
.brand-text {
 font-family: var(--font-display);
 font-weight: 800;
 letter-spacing: 0.08em;
}

/* Главное меню: «карточки» с иконкой */
.side-item {
 border-radius: var(--r-md);
 padding: 9px 10px;
 position: relative;
 transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.side-item .nav-ic {
 width: 34px;
 height: 34px;
 flex: none;
 display: grid;
 place-items: center;
 font-size: 17px;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-10);
 color: var(--muted);
 box-shadow:
  inset 0 1px 0 #fff,
  0 1px 2px rgba(15, 80, 60, 0.07);
 transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.side-item:hover {
 background: var(--surface);
 transform: translateX(3px);
}
.side-item:hover .nav-ic {
 color: var(--accent);
 transform: scale(1.1) rotate(-3deg);
}
.side-item.active {
 background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 55%, var(--brand-800) 100%);
 color: #fff;
 border-color: transparent;
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.35),
  0 8px 18px -6px rgba(4, 120, 87, 0.55);
 transform: scale(1.02);
}
.side-item.active .nav-ic {
 background: rgba(255, 255, 255, 0.2);
 color: #fff;
 border-color: rgba(255, 255, 255, 0.3);
}
.side-item.active .tag {
 color: rgba(255, 255, 255, 0.85);
}
.side-item .tag {
 font-family: var(--font-mono);
 font-size: 12px;
}

/* Нижняя навигация (мобайл) */
.bottom-item {
 transition: color 0.15s;
}
.bottom-item .bi {
 width: 34px;
 height: 26px;
 display: grid;
 place-items: center;
 border-radius: 9px;
 font-size: 17px;
 transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.bottom-item.active {
 color: #fff;
}
.bottom-item.active .bi {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 box-shadow: 0 4px 10px -2px rgba(4, 120, 87, 0.5);
 color: #fff;
 transform: translateY(-1px);
}

/* «Живая» кнопка-капля (блеск) */
.btn-primary {
 position: relative;
 overflow: hidden;
}
.btn-primary::after {
 content: "";
 position: absolute;
 top: -40%;
 left: -60%;
 width: 40%;
 height: 180%;
 background: linear-gradient(
  100deg,
  transparent,
  rgba(255, 255, 255, 0.4),
  transparent
 );
 transform: skewX(-20deg);
 animation: sheen 1.4s var(--ease) 0.2s 1 both; /* один проход, не бесконечно (P0) */
 pointer-events: none;
}
@keyframes sheen {
 0% {
  transform: skewX(-20deg) translateX(0);
 }
 55% {
  transform: skewX(-20deg) translateX(475%);
 }
 100% {
  transform: skewX(-20deg) translateX(475%);
 }
}

/* ===== Нажатие и клавиатурный фокус (P0, 17.10.2026) =====
   Было: :active — 2 на весь файл, :focus-visible — 1. На телефоне прораб не видел,
   что нажал; с клавиатуры на ПК не было видно, где находишься. */
.btn:active:not(:disabled),
.apt-row:active,
.side-item:active,
.bottom-item:active,
.day-chip:active,
.book-day:active,
.type-btn:active,
.mat-chip:active,
.chat-act:active {
  transform: scale(0.985);
  transition-duration: 60ms;
}
.btn-primary:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 0 var(--brand-900);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--ring);
}

/* На тач-экранах наведение «прилипает» после касания: снимаем визуальный ховер,
   оставляем только отклик на нажатие. */
@media (hover: none) and (pointer: coarse) {
  .kpi:hover,
  .apt-row:hover,
  .btn-ghost:hover {
    transform: none;
  }
  .apt-row:hover,
  .kpi:hover {
    border-color: var(--line);
  }
  .btn-ghost:hover {
    border-color: var(--line);
    color: var(--ink-soft);
  }
  .side-item:hover:not(.active) {
    background: transparent;
    transform: none;
  }
  .side-item:hover .nav-ic {
    color: var(--muted);
    transform: none;
  }
}

/* Переход между разделами — ОДИН кроссфейд контейнера (P1, 17.10.2026).
   Раньше fadeUp висел на каждом дочернем блоке: при перерисовке раздел «прыгал». */
.content.content-enter {
 animation: sectionIn var(--dur-2) var(--ease) both;
}
@keyframes sectionIn {
 from {
  opacity: 0;
  transform: translateY(2px);
 }
 to {
  opacity: 1;
  transform: none;
 }
}

/* ============ Расписание (карточки записи + форма) ============ */
.meet-card {
 display: flex;
 gap: 16px;
 align-items: stretch;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px;
 margin: 10px 0;
 box-shadow: 0 1px 2px rgba(15, 80, 60, 0.06);
 animation: fadeUp 0.3s ease both;
}
.meet-date {
 flex: none;
 width: 76px;
 text-align: center;
 align-self: center;
 background: linear-gradient(180deg, #f4fbf7, #e7f3eb);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-14);
 padding: 8px 4px;
}
.meet-wd {
 font-size: 12px;
 font-weight: 700;
 color: var(--accent-ink);
 text-transform: uppercase;
 letter-spacing: 0.03em;
}
.meet-d {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 34px;
 line-height: 1;
 color: var(--ink);
}
.meet-mon {
 font-size: 13px;
 font-weight: 700;
 color: var(--muted);
 text-transform: capitalize;
}
.meet-main {
 flex: 1;
 min-width: 0;
}
.meet-top {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 align-items: flex-start;
 flex-wrap: wrap;
}
.meet-title {
 font-weight: 700;
 font-size: 16px;
}
.meet-timeline {
 display: flex;
 align-items: baseline;
 gap: 10px;
 flex-wrap: wrap;
 margin: 8px 0 4px;
}
.meet-clock {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 30px;
 line-height: 1;
 color: var(--accent);
}
.meet-note {
 font-size: 14px;
 color: var(--ink-soft);
}
.meet-signs {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin: 4px 0 8px;
}
.meet-sign {
 font-size: 12px;
 font-weight: 600;
 color: var(--muted);
 font-family: var(--font-mono);
}
.meet-sign.ok {
 color: var(--ok);
}
.meet-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.btn-danger {
 background: #fff;
 color: var(--err);
 border: 1px solid #f0c7c2;
}
.btn-danger:hover {
 background: var(--err);
 color: #fff;
 border-color: var(--err);
}
.meet-form {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 gap: 12px;
 margin-top: 8px;
}
.fld {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.fld-wide {
 grid-column: 1 / -1;
}
.fld label {
 font-size: 12px;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 700;
}
.fld input,
.fld select {
 min-height: 50px;
 padding: 0 12px;
 border: 1px solid var(--line-input);
 border-radius: var(--r-10);
 font-size: 16px;
 font-family: inherit;
 background: var(--surface);
 width: 100%;
}
.fld input:focus,
.fld select:focus {
 outline: 2px solid var(--accent-bright);
 outline-offset: 1px;
 border-color: transparent;
}
.meet-form .btn-primary {
 grid-column: 1 / -1;
 min-height: 52px;
 font-size: 16px;
}
.meet-done {
 display: flex;
 gap: 12px;
 align-items: center;
 flex-wrap: wrap;
 padding: 8px 0;
 border-bottom: 1px solid var(--line-soft);
 font-size: 14px;
}
.meet-done-kv {
 font-family: var(--font-display);
 font-weight: 700;
 color: var(--accent-ink);
}
@media (max-width: 640px) {
 .meet-card {
  gap: 12px;
  padding: 12px;
 }
 .meet-date {
  width: 64px;
 }
 .meet-d {
  font-size: 28px;
 }
 .meet-clock {
  font-size: 26px;
 }
}

/* Расписание: тип встречи виден полностью, поля шире */
.meet-form {
 grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.meet-form .fld select {
 width: 100%;
 min-height: 50px;
 padding: 0 10px;
}
.meet-form .fld input[type="date"],
.meet-form .fld input[type="time"] {
 min-height: 50px;
}
@media (max-width: 560px) {
 .meet-form {
  grid-template-columns: 1fr 1fr;
 }
 .fld-wide {
  grid-column: 1 / -1;
 }
 .meet-form .btn-primary {
  grid-column: 1 / -1;
 }
}

.meet-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 margin-bottom: 8px;
}

/* Правила приёма встреч (владелица) */
.rules-row {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 margin: 6px 0;
}
.day-chips {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
}
.day-chip {
 min-width: 42px;
 height: 38px;
 border: 1px solid var(--line);
 background: var(--surface);
 border-radius: var(--r-10);
 font-weight: 700;
 color: var(--muted);
 cursor: pointer;
 transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
 font-size: 14px;
}
.day-chip:hover {
 border-color: var(--accent-bright);
}
.day-chip.on {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 color: #fff;
 border-color: transparent;
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.3),
  0 4px 8px -2px rgba(4, 120, 87, 0.4);
}
/* Сортировка списка «Забытые» в дашборде (12.09.2026) */
.sort-bar {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 12px;
}
.sort-lbl {
 font-size: 12px;
 color: var(--muted);
 font-weight: 600;
}
.sort-chip {
 min-width: 0;
 height: 34px;
 padding: 0 12px;
 font-size: 13px;
 white-space: nowrap;
}
.rules-time {
 display: flex;
 gap: 12px;
 align-items: flex-end;
 flex-wrap: wrap;
}
.rules-time .fld {
 width: 170px;
}
.rules-time .fld input {
 min-height: 44px;
}
.rules-hint {
 font-size: 12px;
 color: var(--muted);
 margin: 8px 0;
}

/* Онлайн-запись клиента */
.book-days {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin: 8px 0;
}
.book-flow {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin: 10px 0 4px;
}
.book-flow-btn {
 padding: 9px 14px;
 border-radius: var(--r-md);
 border: 1.5px solid var(--line);
 background: var(--surface);
 font-weight: 700;
 font-size: 14px;
 color: var(--ink);
 cursor: pointer;
 text-align: left;
 line-height: 1.25;
}
.book-flow-btn.on {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 color: #fff;
 border-color: transparent;
}
.book-day {
 min-width: 64px;
 padding: 7px 8px;
 border: 1px solid var(--line);
 background: var(--surface);
 border-radius: var(--r-10);
 font-weight: 700;
 font-size: 13px;
 cursor: pointer;
 text-align: center;
 line-height: 1.25;
 transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.book-day:hover {
 border-color: var(--accent-bright);
}
.book-day.active {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 color: #fff;
 border-color: transparent;
}
.book-day.off {
 opacity: 0.45;
 cursor: not-allowed;
}
.book-slots {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 6px 0;
}
.slot-btn {
 min-width: 66px;
 padding: 8px 6px;
 border-radius: var(--r-10);
 font-weight: 700;
 font-size: 14px;
 cursor: pointer;
 font-family: var(--font-mono);
}
.slot-btn.free {
 background: var(--ok-bg);
 color: var(--accent-ink);
 border: 1px solid #b5dcc9;
}
.slot-btn.free:hover {
 border-color: var(--ok);
 transform: translateY(-1px);
}
.slot-btn.free.picked {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 color: #fff;
 border-color: transparent;
}
.slot-btn.busy {
 background: #f1f1ee;
 color: #b9bcb8;
 border: 1px dashed #dfe1dc;
 cursor: not-allowed;
 text-decoration: line-through;
}
.book-confirm {
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
 margin-top: 10px;
 padding: 12px;
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
}
.book-confirm select {
 min-height: 40px;
 border: 1px solid var(--line);
 border-radius: var(--r-xs);
 font-size: 14px;
 background: var(--surface);
}

/* Выбор вида встречи у клиента — кнопки сразу (до выбора дня/времени) */
.book-types {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 8px;
 margin: 6px 0 2px;
}
.type-btn {
 display: flex;
 gap: 10px;
 align-items: center;
 text-align: left;
 border: 1.5px solid var(--line);
 background: var(--surface);
 border-radius: var(--r-14);
 padding: 10px 12px;
 cursor: pointer;
 transition:
  border-color 0.15s,
  background 0.15s;
}
.type-btn:hover:not(:disabled) {
 border-color: var(--accent-bright);
}
.type-btn .type-ic {
 font-size: 24px;
 line-height: 1;
}
.type-btn .type-body {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}
.type-btn .type-lbl {
 font-weight: 800;
 font-size: 14px;
 color: var(--ink);
}
.type-btn .type-sub {
 font-size: 12px;
 color: var(--muted);
 line-height: 1.3;
}
.type-btn.on {
 border-color: #0e9f6e;
 background: linear-gradient(135deg, #f0fdf7, #dcf5ea);
}
.type-btn.off {
 opacity: 0.5;
 cursor: not-allowed;
}
.book-chosen-ln .book-chosen-t {
 font-weight: 800;
 font-size: 14px;
 color: var(--accent-ink);
}
.book-chosen-ln .book-chosen-s {
 font-size: 13px;
 color: var(--ink-soft);
 margin-top: 2px;
}

/* Типы встреч — цветовые акценты и группы (прораб видит вид встречи сразу) */
.meet-card.mt-repair {
 border-left: 5px solid #e8930c;
}
.meet-card.mt-handover {
 border-left: 5px solid #0e9f6e;
}
.meet-card.mt-materials {
 border-left: 5px solid #8b5cf6;
}
.meet-card.mt-contract {
 border-left: 5px solid #0284c7;
}
.meet-group-title {
 font-size: 13px;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 font-weight: 800;
 margin: 14px 0 4px;
 font-family: var(--font-display);
}
.meet-group-title.mt-repair {
 color: var(--accent);
}
.meet-group-title.mt-handover {
 color: #0e7490;
}
.meet-group-title.mt-materials {
 color: #6d28d9;
}
.meet-group-title.mt-contract {
 color: #0369a1;
}
.meet-tabs {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin: 6px 0 2px;
}
.mtab {
 padding: 6px 12px;
 border-radius: var(--r-pill);
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--ink-soft);
 font-weight: 700;
 font-size: 12.5px;
 cursor: pointer;
}
.mtab:hover {
 border-color: var(--accent-bright);
}
.mtab.on {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 color: #fff;
 border-color: transparent;
}

.leg {
 display: flex;
 gap: 8px;
 align-items: center;
}
.leg .slot-btn {
 pointer-events: none;
 min-width: auto;
 padding: 3px 10px;
 font-size: 12px;
}

/* Подсказки-шаги */
.guide {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin: 8px 0;
}

/* Напоминание клиенту: смета ждёт согласования (2/4/6 дней) */
.smeta-reminder {
 flex: 1;
 min-width: 0;
 background: linear-gradient(135deg, #fff7e0, #fdf0cf);
 border: 1px solid #ecd9a0;
 border-radius: var(--r-10);
 padding: 10px 12px;
 font-size: 14px;
 font-weight: 600;
 color: #7c4a03;
 line-height: 1.4;
}
.smeta-rem-row {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
 margin: 0 0 8px;
}
/* События по сметам (требуют внимания менеджера) */
.est-alerts {
 margin-bottom: 12px;
}
.est-alerts .meet-done {
 gap: 10px;
}

.guide-step {
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-pill);
 padding: 6px 12px;
 font-size: 13px;
 font-weight: 600;
 color: var(--ink-soft);
}
.guide-note {
 font-size: 13px;
 color: var(--ink-soft);
 background: var(--ok-bg);
 border: 1px solid #cfe8da;
 border-radius: var(--r-10);
 padding: 10px 12px;
 margin: 6px 0;
}
.ok-note {
 background: var(--ok-bg);
 color: var(--accent-ink);
 border: 1px solid #b5dcc9;
 border-radius: var(--r-10);
 padding: 10px 12px;
 font-weight: 600;
 margin-bottom: 8px;
}
/* Предложение записаться в тот же день на парный вид (материалы ↔ ремонт) */
.pair-offer {
 margin: 6px 0 10px;
 padding: 12px;
 background: linear-gradient(135deg, #eefbf6, #e6f4ff);
 border: 1px solid #bcd9f2;
 border-radius: var(--r-md);
}
.pair-offer-h {
 display: flex;
 gap: 10px;
 align-items: flex-start;
}
.pair-offer-ic {
 font-size: 22px;
 line-height: 1.2;
}
.pair-offer-t {
 font-weight: 800;
 color: var(--accent-ink);
 font-size: 14.5px;
}
.pair-offer-s {
 font-size: 13px;
 color: var(--ink-soft);
 margin-top: 2px;
}
.pair-offer-row {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 align-items: center;
 margin-top: 10px;
}
.pair-offer-row .slot-btn {
 min-width: auto;
 padding: 8px 16px;
 font-weight: 700;
}
.book-chosen {
 font-weight: 700;
 color: var(--accent-ink);
}
.busy-list {
 margin-top: 8px;
 font-size: 13px;
 color: var(--muted);
}
.busy-list-title {
 font-weight: 700;
 color: var(--ink-soft);
 margin-bottom: 2px;
}
.busy-line {
 font-family: var(--font-mono);
}

/* Материалы компактно (клиент) */
.mat-flat {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 6px 0;
}
.mat-chip {
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-pill);
 padding: 6px 12px;
 font-size: 13px;
 font-weight: 600;
 display: inline-flex;
 gap: 6px;
 align-items: baseline;
}
.mat-chip-name {
 color: var(--ink);
}
.mat-chip-cat {
 color: var(--muted);
 font-size: 12px;
 text-transform: lowercase;
 font-weight: 700;
}
.book-ask {
 font-size: 13px;
 color: var(--ink-soft);
 font-weight: 600;
}

.link-search {
 width: 100%;
 max-width: 360px;
 min-height: 44px;
 padding: 0 14px;
 border: 1px solid var(--line);
 border-radius: var(--r-10);
 font-size: 15px;
 background: var(--surface);
 margin: 8px 0;
}
/* Раздел «Ссылки»: своя раскладка строки — номер + текст-ссылка, действия на всю ширину внизу */
.link-row {
 display: grid;
 grid-template-columns: max-content 1fr;
 gap: 4px 14px;
 align-items: center;
 cursor: pointer;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 padding: 12px 14px;
 margin-bottom: 8px;
 transition:
  border-color 0.15s,
  box-shadow 0.15s;
}
.link-row:hover {
 border-color: var(--accent-bright);
 box-shadow: var(--shadow-md);
}
.link-row .link-acts {
 grid-column: 1 / -1;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 padding-top: 10px;
 border-top: 1px dashed var(--line-soft);
 margin-top: 4px;
}
.link-row .btn {
 white-space: nowrap;
}
.link-row .apt-num {
 min-width: 70px;
 align-self: start;
 padding-top: 2px;
}
.link-url {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--accent-ink);
 word-break: break-all;
}
@media (max-width: 768px) {
 .link-row {
  grid-template-columns: 56px 1fr;
  gap: 4px 12px;
 }
 .link-row .link-acts {
  grid-column: 1 / -1;
 }
}

/* Раздел «Ссылки» — режим рассылки: счётчики, выбор текста, статусы */
.link-numcol {
 display: flex;
 flex-direction: column;
 gap: 6px;
 align-items: flex-start;
 align-self: start;
 padding-top: 2px;
}
.link-numcol .pill {
 font-size: 12px;
 padding: 2px 8px;
}
.link-body {
 min-width: 0;
}
.link-body .apt-sub {
 font-size: 12.5px;
 margin-top: 3px;
}
.link-stat {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 16px;
 margin: 4px 0 2px;
 font-weight: 700;
 color: var(--accent-ink);
 font-size: 14px;
}
.link-tpl-row {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin: 8px 0 2px;
}
.link-tpl-row select {
 max-width: 420px;
 min-height: 44px;
 border: 1px solid var(--line);
 border-radius: var(--r-10);
 background: var(--surface);
 font-size: 14px;
 padding: 0 10px;
}
.link-tpl-preview {
 font-size: 13px;
 color: var(--ink-soft);
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-xs);
 padding: 8px 10px;
 max-width: 720px;
 word-break: break-word;
}
.link-tabs {
 margin-bottom: 4px;
}
.link-statuses {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 align-items: center;
 flex: 1;
}
.link-statuses .link-st {
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--ink-soft);
 font-size: 12.5px;
 padding: 6px 10px;
}
.link-statuses .link-st:hover {
 border-color: var(--accent-bright);
}
.link-statuses .link-st.on {
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 color: #fff;
 border-color: transparent;
}

/* ============ Карточка квартиры (сотрудник): зоны-блоки ============ */
/* Доп. цвета зон */
.z-doc {
 --zc: #0e7490;
}
.z-fin {
 --zc: #a16207;
}
/* Герой-паспорт в карточке квартиры сотрудника */
.hero-pills {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 8px;
 flex-wrap: wrap;
}
.hero .apt-sub {
 color: rgba(255, 255, 255, 0.8);
 font-size: 13px;
 margin-top: 4px;
}
.hero-note {
 margin: 14px 0 0;
 background: rgba(255, 255, 255, 0.2);
 border: 1px solid rgba(255, 255, 255, 0.25);
 border-radius: var(--r-10);
 padding: 8px 12px;
 font-size: 13px;
 color: #fff;
}
/* Пометка «клиент согласовал, файл ещё не обновлён» (кв 859, 12.09.2026):
   тот же герой-стиль, но тёплый акцент, чтобы отличать от примечания 📋 */
.hero-note.agree-note {
 background: rgba(180, 83, 9, 0.28);
 border-color: rgba(253, 186, 116, 0.55);
}
.hero .label {
 color: rgba(255, 255, 255, 0.7);
}
.hero .pill {
 background: rgba(255, 255, 255, 0.18);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.4);
}
.hero .pill-ok::before {
 background: #86efac;
}
.hero .pill-warn::before {
 background: #fde68a;
}
/* Карточка квартиры: две вертикальные зоны (слева короткие, справа длинные) + футер */
.card-cols2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 align-items: start;
 margin-bottom: 14px;
}
.card-stack {
 display: flex;
 flex-direction: column;
 gap: 14px;
 min-width: 0;
}
.card-stack .zone {
 margin: 0;
}
.card-foot {
 margin-top: 6px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
 padding-top: 14px;
 border-top: 1px dashed var(--line-soft);
}
/* Низ карточки: № квартиры рядом с кнопкой закрытия (чтобы не листать вверх) */
.card-foot .foot-num {
 display: flex;
 flex-direction: column;
 min-width: 0;
}
.card-foot .foot-num-main {
 font-size: 14px;
 color: var(--ink);
}
.card-foot .foot-num-geo {
 font-size: 12px;
 color: var(--muted);
}
@media (max-width: 560px) {
 .card-foot {
  justify-content: center;
 }
 .card-foot .foot-num {
  width: 100%;
  text-align: center;
 }
}
@media (max-width: 980px) {
 .card-cols2 {
  grid-template-columns: 1fr;
 }
}

/* Договор-цепочка: ровное выравнивание значений в плашках */
.contract-chain {
 display: flex;
 align-items: stretch;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 4px;
}
.contract-step {
 flex: 1 1 150px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 background: var(--surface-2);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 12px 14px;
 min-width: 120px;
}
.contract-label {
 font-size: 12px;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: var(--muted);
 font-family: var(--font-mono);
 font-weight: 600;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.contract-value {
 font-size: 17px;
 font-weight: 800;
 margin-top: 4px;
 line-height: 1.2;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
 color: var(--ink);
}
.contract-arrow {
 color: var(--muted);
 font-size: 18px;
 align-self: center;
 flex: none;
}
.days-ok {
 color: var(--ok);
}
.days-warn {
 color: var(--accent);
}
.days-over {
 color: var(--err);
}
/* Финансы: плитки */
.finance-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: 10px;
 margin-top: 4px;
}
.finance-tile {
 background: var(--surface-2);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 12px 16px;
}
.finance-tile.highlight {
 background: #fbefe1;
 border-color: #efd9ac;
}
.t-label {
 font-size: 12px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
 font-family: var(--font-mono);
 font-weight: 600;
}
.t-value {
 font-size: 19px;
 font-weight: 800;
 margin-top: 4px;
 font-variant-numeric: tabular-nums;
 color: var(--ink);
}

/* Карточка квартиры: исполнитель работ + заголовки групп встреч */
.w-exec {
 font-size: 12.5px;
 color: #0e7490;
 margin-top: 2px;
 font-weight: 600;
}
.meet-done-t {
 font-size: 12px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
 font-family: var(--font-mono);
 font-weight: 700;
 margin: 10px 0 4px;
}

/* ===== Мобильная полировка: менеджер/прораб/клиент на телефоне ===== */
@media (max-width: 1024px) {
 body.lock-scroll {
  overflow: hidden;
 }
}
@media (max-width: 640px) {
 /* 1) Карточка квартиры — на весь экран, как отдельная страница */
 .overlay {
  padding: 0;
 }
 .drawer {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom));
 }
 .drawer-head {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
 }
 .drawer-head .apt-num {
  font-size: 16px;
 }
 /* кнопка-стрелка «←» на телефоне (текст прячем) */
 .card-back .back-txt {
  display: none;
 }
 .card-back {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
 }
 .card-back .back-ic {
  display: inline;
 }
 .card-back .back-ic .ic {
  width: 24px;
  height: 24px;
 }

 /* 2) Плотность: панели/зоны компактнее, больше информации на экране */
 .content {
  padding: 12px 12px calc(88px + env(safe-area-inset-bottom));
 }
 .page-title h1 {
  font-size: 19px;
 }
 .page-desc {
  font-size: 13px;
  margin: 0 0 14px;
 }
 .panel {
  padding: 14px 12px;
  margin-bottom: 12px;
 }
 .zone {
  padding: 12px 12px 10px;
  border-radius: var(--r-md);
 }
 .zone-head {
  margin-bottom: 8px;
 }
 .hero {
  border-radius: var(--r-14);
  padding: 16px 14px 14px;
 }
 .card-cols2,
 .card-stack {
  gap: 10px;
  margin-bottom: 10px;
 }
 .meet-card {
  padding: 12px 12px;
 }
}

/* Кнопка «назад/закрыть» карточки — крупная, современная (десктоп и планшет) */
.card-back {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 min-height: 44px;
 border-radius: var(--r-md);
 font-weight: 700;
 font-size: 15px;
}
.card-back .back-ic {
 display: inline-flex;
 align-items: center;
}
.card-back .back-ic .ic {
 width: 22px;
 height: 22px;
}

/* Скидки/вычеты в смете — показываем отдельным цветом */
.smeta-td-sum.smeta-neg {
 color: var(--err);
}

/* ===== Помощь и «Быстрый старт» (подсказки по ролям) ===== */
.ov-help {
 position: fixed;
 inset: 0;
 display: none;
 align-items: center;
 justify-content: center;
 background: rgba(15, 23, 42, 0.45);
 z-index: 90;
 padding: 16px;
}
.hlp-card {
 width: min(620px, 100%);
 max-height: 88dvh;
 overflow: auto;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 18px;
 box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.5);
 animation: fadeUp 0.25s ease both;
}
.hlp-intro {
 max-width: 560px;
}
.hlp-head {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 justify-content: space-between;
}
.hlp-kicker {
 font-size: 12px;
 letter-spacing: 0.07em;
 text-transform: uppercase;
 color: var(--accent-ink);
 font-weight: 800;
 font-family: var(--font-display);
}
.hlp-title {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 20px;
 margin: 3px 0 6px;
 color: var(--ink);
}
.hlp-close {
 border-radius: 50%;
 width: 38px;
 height: 38px;
 padding: 0;
 flex: none;
}
.hlp-short {
 color: var(--ink-soft);
 font-size: 13.5px;
 margin-bottom: 8px;
}
.hlp-steps {
 margin: 6px 0 14px;
 padding-left: 20px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 font-size: 14px;
 color: var(--ink);
 line-height: 1.45;
}
.hlp-guide {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.hlp-sec {
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: var(--r-md);
 padding: 10px 12px;
}
.hlp-h {
 font-weight: 800;
 font-size: 13.5px;
 color: var(--accent-ink);
 margin-bottom: 2px;
}
.hlp-sec p {
 margin: 0;
 font-size: 13px;
 color: var(--ink-soft);
 line-height: 1.5;
}
/* Диагностика в «Проверке приложения» — по строке на показатель */
.chk-line {
 font-size: 12.5px;
 color: var(--ink-soft);
 line-height: 1.55;
 padding: 1px 0;
 word-break: break-word;
}
.hlp-card .row-actions {
 margin-top: 14px;
}
.btn-help {
 border-radius: 50%;
 width: 38px;
 height: 38px;
 min-height: 38px;
 padding: 0;
 font-weight: 800;
 flex: none;
}
@media (max-width: 640px) {
 .hlp-card {
  padding: 14px;
 }
 .hlp-title {
  font-size: 18px;
 }
}

/* Блокировка прокрутки фона под полноэкранными слоями */
body.lock-scroll {
 overflow: hidden;
}

/* Контекстные подсказки «к месту» (слой 2 онбординга) */
.ctx-hint {
 font-size: 12.5px;
 color: var(--muted);
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: var(--r-10);
 padding: 8px 12px;
 margin: 6px 0;
 line-height: 1.45;
}

/* Встроенный confirm и тост (вместо системных диалогов — не блокируют страницу) */
.ask-ov {
 position: fixed;
 inset: 0;
 z-index: 100;
 display: none;
 align-items: center;
 justify-content: center;
 background: rgba(15, 23, 42, 0.4);
 padding: 20px;
}
.ask-card {
 width: min(360px, 100%);
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-lg);
 padding: 18px;
 box-shadow: 0 20px 50px -18px rgba(15, 23, 42, 0.5);
 animation: fadeUp 0.2s ease both;
}
.ask-card .hlp-title {
 font-size: 17px;
 margin: 0 0 14px;
}

/* ==== Окно-предупреждение перед согласованием сметы (12.09.2026) ====
   Требования владелицы: чёткие блоки и разделения, важное крупно и с заливкой,
   хорошо читается на телефоне. Тексты блоков приходят с сервера
   (app/estimate_terms.py) — здесь только оформление. */
.terms-ov {
 align-items: flex-end;
 padding: 0;
}
.terms-card {
 display: flex;
 flex-direction: column;
 width: 100%;
 max-width: 560px;
 max-height: 94vh;
 padding: 0;
 border-radius: 18px 18px 0 0;
 overflow: hidden;
}
/* Заголовок закреплён: видно, о чём окно, даже при прокрутке */
.terms-head {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 14px 16px 10px;
 background: var(--surface);
 border-bottom: 1px solid var(--line);
}
.terms-title {
 flex: 1;
 font-family: var(--font-display);
 font-size: 20px;
 line-height: 1.2;
 font-weight: 700;
}
.terms-x {
 flex: none;
 min-width: 44px;
 min-height: 44px;
}
/* Прокручиваемая середина: воздух и разделители между блоками */
.terms-scroll {
 flex: 1;
 overflow-y: auto;
 padding: 12px 16px 4px;
 -webkit-overflow-scrolling: touch;
}
.terms-intro {
 margin: 0 0 12px;
 font-size: 15px;
 line-height: 1.45;
 color: var(--muted);
}
.terms-block {
 padding: 14px 0;
 border-top: 1px solid var(--line);
}
.terms-block:first-of-type {
 border-top: none;
 padding-top: 4px;
}
.terms-block-top {
 display: flex;
 align-items: baseline;
 gap: 10px;
 margin-bottom: 6px;
}
.terms-n {
 flex: none;
 min-width: 24px;
 height: 24px;
 border-radius: var(--r-xs);
 background: var(--surface-2, #eef2f6);
 color: var(--ink);
 font-weight: 700;
 font-size: 14px;
 text-align: center;
 line-height: 24px;
}
/* Заголовок пункта — то, по чему читают по диагонали */
.terms-block-t {
 font-size: 17px;
 font-weight: 800;
 line-height: 1.25;
 letter-spacing: 0.01em;
}
.terms-block-b {
 margin: 0;
 font-size: 15px;
 line-height: 1.5;
}
.terms-bullets {
 margin: 8px 0 0;
 padding-left: 20px;
 font-size: 15px;
 line-height: 1.5;
}
.terms-bullets li {
 margin-bottom: 4px;
}
/* Заливка — только два главных блока (пункт 4 и пункт 5) */
.terms-block.fill {
 margin: 10px 0;
 padding: 12px 14px;
 border: 1px solid #f3c98b;
 border-radius: var(--r-md);
 background: #fdf3e2;
}
.terms-block.fill .terms-n {
 background: #f6d9a8;
}
.terms-foot {
 margin: 14px 0 10px;
 padding-top: 12px;
 border-top: 1px solid var(--line);
 font-size: 14px;
 line-height: 1.45;
 color: var(--muted);
}
/* Низ закреплён: галочка и кнопки всегда доступны */
.terms-bottom {
 flex: none;
 padding: 10px 16px 14px;
 background: var(--surface);
 border-top: 1px solid var(--line);
 box-shadow: 0 -8px 18px -14px rgba(15, 23, 42, 0.5);
}
.terms-check {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 44px;
 cursor: pointer;
}
.terms-check input {
 width: 22px;
 height: 22px;
 flex: none;
 accent-color: var(--brand-800);
}
.terms-check-t {
 font-size: 15px;
 font-weight: 600;
 line-height: 1.35;
}
.terms-check-h {
 margin: 0 0 8px;
 font-size: 12px;
 color: var(--muted);
}
.terms-btns {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.terms-btn {
 width: 100%;
 min-height: 48px;
 font-size: 16px;
}
/* Компактная строка «Правила согласования» вместо повторного окна */
.terms-compact {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 8px;
 font-size: 13px;
 color: var(--muted);
}
.terms-compact-l {
 border: none;
 background: none;
 /* WCAG 2.5.8: цель не меньше 24×24 — было 56×16 */
 padding: 6px 2px;
 min-height: 24px;
 display: inline-flex;
 align-items: center;
 font-size: 13px;
 font-weight: 700;
 color: var(--accent-bright, var(--brand-800));
 text-decoration: underline;
 cursor: pointer;
}
@media (min-width: 700px) {
 .terms-ov {
  align-items: center;
  padding: 20px;
 }
 .terms-card {
  border-radius: 18px;
 }
}
.toast-top {
 position: fixed;
 top: 14px;
 left: 50%;
 transform: translate(-50%, -70px);
 z-index: 110;
 background: #065f46;
 color: #fff;
 font-weight: 600;
 font-size: 14px;
 padding: 11px 18px;
 border-radius: var(--r-pill);
 box-shadow: 0 10px 24px -10px rgba(6, 95, 70, 0.6);
 opacity: 0;
 transition:
  transform 0.25s ease,
  opacity 0.25s ease;
 pointer-events: none;
 max-width: 88vw;
 text-align: center;
}
.toast-top.show {
 transform: translate(-50%, 0);
 opacity: 1;
}

/* Удаление сообщения чата (только администратор) */
.chat-del {
 margin-left: 6px;
 border: none;
 background: transparent;
 color: var(--muted);
 width: 24px;
 height: 24px;
 border-radius: 50%;
 cursor: pointer;
 font-size: 12px;
 line-height: 1;
 flex: none;
}
.chat-del:hover {
 background: #fde2dd;
 color: var(--err);
}

/* Изменение сообщения (владелец — любое, в т.ч. «Анастасии»; автор — своё) */
.chat-edit:hover {
 background: #e3ecf7;
 color: #2f6fb2;
}
/* Копирование текста сообщения (для вставки в чат клиента) */
.chat-copy:hover {
 background: #e7f0e4;
 color: #3c7a45;
}
.chat-copy {
 font-size: 13px;
 line-height: 1;
}
/* Переотправка сообщения клиенту (владелица, 11.10.2026): клиент задаёт один
   и тот же вопрос — отправляем уже написанное объяснение, не сочиняя заново */
.chat-resend {
 font-size: 14px;
 line-height: 1;
}
.chat-resend:hover {
 background: #e3ecf7;
 color: #2f6fb2;
}
.tag-resend {
 background: #e7f0e4;
 color: #3c7a45;
 border-radius: var(--r-sm);
 padding: 1px 7px;
 font-size: 12px;
 font-weight: 700;
}
.chat-edited {
 font-size: 12px;
 color: var(--muted);
 font-style: italic;
 margin-left: 6px;
}
.chat-edit-pane {
 margin-top: 4px;
}
/* ===== v134: правка сообщения — во всю ширину переписки =====
   Было: редактор живёт внутри «пузыря» сообщения, а пузырь ужимается по содержимому
   и ограничен 85% ширины — из-за этого поле правки было маленьким
   (владелица 13.09.2026: «можно сделать широким как окно чата?»). */
.chat-msg.msg-editing {
 max-width: 100%;
 width: 100%;
 align-self: stretch;
}
.chat-msg.msg-editing .chat-edit-pane,
.chat-msg.msg-editing .chat-edit-input {
 width: 100%;
 max-width: 100%;
}
.chat-edit-input {
 box-sizing: border-box;
 width: 100%;
 font: inherit;
 font-size: 14px;
 padding: 6px 8px;
 border: 1px solid var(--line-soft);
 border-radius: var(--r-sm);
 background: #fff;
 color: inherit;
 resize: vertical;
 /* было 56px — для правки длинных сообщений мало */
 min-height: 96px;
}
.chat-edit-btns {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
 margin-top: 6px;
}

/* ===== v50: значок типа встречи — белая 3D-«глина» на цветной плашке ===== */
/* Плашка: цветной градиент цвета типа + иконка из /static/ic/*.png.
   Размеры: .mti-s (текст/списки) · .mti-m (заголовки) · .mti-l (кнопки клиента) */
.mti {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 border-radius: 30%;
 box-shadow: 0 2px 4px rgba(18, 53, 44, 0.16);
 background: linear-gradient(145deg, #34d399, var(--brand-700));
 vertical-align: -4px;
}
.mti .mti-img {
 display: block;
 width: 64%;
 height: 64%;
 object-fit: contain;
}
.mti-s {
 width: 20px;
 height: 20px;
 border-radius: var(--r-sm);
}
.mti-s .mti-img {
 width: 70%;
 height: 70%;
}
.mti-m {
 width: 30px;
 height: 30px;
 border-radius: 9px;
}
.mti-l {
 width: 50px;
 height: 50px;
 border-radius: 15px;
}
.mti.t-repair {
 background: linear-gradient(145deg, #f59e0b, #ea580c);
}
.mti.t-handover {
 background: linear-gradient(145deg, #34d399, var(--brand-700));
}
.mti.t-materials {
 background: linear-gradient(145deg, #a78bfa, #7c3aed);
}
.mti.t-contract {
 background: linear-gradient(145deg, #38bdf8, #0369a1);
}
/* Контейнеры, куда встаёт плашка рядом с текстом */
.meet-title {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}
.meet-title-t {
 min-width: 0;
}
/* Счётчик встреч: «1-я встреча», «2-я встреча» (владелица 17.10.2026).
   Первая встреча — строгие правила (материалы → ремонт), дальше — проще. */
.meet-seq {
 display: inline-block;
 margin-left: 6px;
 padding: 1px 7px;
 border-radius: var(--r-10);
 background: var(--surface-2, #eef2f7);
 color: var(--muted, #5b6b7c);
 font-size: 12px;
 font-weight: 600;
 white-space: nowrap;
 vertical-align: middle;
}
.mtab {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}
.meet-group-title,
.meet-done-t {
 display: flex;
 align-items: center;
 gap: 6px;
}
.book-chosen-t {
 display: flex;
 align-items: center;
 gap: 6px;
}
.pair-offer-ic {
 display: inline-flex;
 align-items: center;
}
/* ===== v51: спрайт-иконки — линии, а не чёрные заливки ===== */
/* Lucide-пути без stroke рендерятся чёрными силуэтами; правим на линии currentColor */
.ic {
 fill: none;
 stroke: currentColor;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.ic-solid {
 fill: currentColor;
 stroke: none;
}
/* v51: кнопки-иконки действий чата: белый глиф на изумрудной плашке */
.chat-ico {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 padding: 0;
 border: none;
 border-radius: var(--r-md);
 cursor: pointer;
 color: #fff;
 flex: none;
 background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.3),
  0 3px 8px -4px rgba(4, 120, 87, 0.55);
}
.chat-ico:hover {
 filter: brightness(1.06);
}
.chat-ico .ic {
 width: 20px;
 height: 20px;
}
.chat-ico.rec {
 background: linear-gradient(135deg, #f87171, #dc2626);
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.3),
  0 3px 8px -4px rgba(220, 38, 38, 0.5);
}

/* ===== v124: подсказки про вложения в кабинете клиента (владелица 12.09.2026) =====
   Клиенты не понимали, где прикрепить проект/фото — поэтому кнопка со словами
   и постоянная (не исчезающая) подсказка под полем ввода. */
.chat-ico-wide {
 width: auto;
 gap: 6px;
 padding: 0 12px;
 min-height: 38px;
 font-size: 13px;
 font-weight: 600;
}
.chat-ico-lbl {
 white-space: nowrap;
}
.chat-attach-hint {
 margin: 6px 2px 0;
 font-size: 12px;
 line-height: 1.35;
 color: var(--muted);
}
/* Подсказка в блоке «Смета»: фото/проект/замер — в чат */
.smeta-files-hint {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 margin: 10px 0 0;
 padding: 8px 10px;
 font-size: 13px;
 line-height: 1.4;
 color: var(--muted);
 background: rgba(4, 120, 87, 0.06);
 border: 1px dashed rgba(4, 120, 87, 0.35);
 border-radius: var(--r-10);
}
/* Мини-превью «что где в кабинете» — показываем один раз на устройстве */
.where-hint {
 margin: 0 0 12px;
 padding: 12px 14px;
 background: linear-gradient(135deg, #eafaf5, #e3f3ff);
 border: 1px solid #a9e0cd;
 border-radius: var(--r-14);
}
.where-hint-head {
 display: flex;
 align-items: baseline;
 gap: 10px;
}
.where-hint-t {
 flex: 1;
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 15px;
}
.where-hint-x {
 border: none;
 background: none;
 padding: 4px 6px;
 font-size: 16px;
 line-height: 1;
 color: var(--muted);
 cursor: pointer;
}
.where-hint-row {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-top: 8px;
}
.where-hint-n {
 flex: none;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: var(--brand-800);
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 line-height: 22px;
 text-align: center;
}
.where-hint-title {
 font-size: 14px;
 font-weight: 600;
}
.where-hint-sub {
 font-size: 12.5px;
 line-height: 1.35;
 color: var(--muted);
}
.where-hint-go {
 width: 100%;
 min-height: 42px;
 margin-top: 10px;
}
@media (max-width: 360px) {
 .chat-ico-lbl {
  display: none;
 }
 .chat-ico-wide {
  width: 38px;
  padding: 0;
 }
}

/* ===== v52: карточка «установите на экран / включите уведомления» (клиент) ===== */
.inst-card {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 background: linear-gradient(135deg, #eafaf5, #e3f3ff);
 border: 1px solid #a9e0cd;
 border-radius: var(--r-14);
 padding: 10px 12px;
 margin: 0 0 12px;
 box-shadow: 0 8px 20px -14px rgba(14, 116, 144, 0.6);
}
.inst-ic {
 flex: none;
 font-size: 26px;
}
.inst-tx {
 flex: 1 1 180px;
 min-width: 0;
}
.inst-t {
 font-weight: 800;
 font-size: 14.5px;
 color: var(--accent-ink);
}
.inst-s {
 font-size: 12.5px;
 color: var(--ink-soft);
 margin-top: 2px;
 line-height: 1.35;
}
.inst-acts {
 display: flex;
 gap: 8px;
 flex: 0 0 auto;
 flex-wrap: wrap;
}
/* Модалка-инструкция «как установить / включить уведомления» (на базе .ask-card) */
.push-card {
 width: min(430px, 92vw);
}
.push-g-head {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 10px;
}
.push-g-t {
 font-weight: 800;
 font-size: 16px;
 color: var(--ink);
}
.push-g-why {
 font-size: 13.5px;
 color: var(--ink-soft);
 margin: 8px 0 10px;
}
.push-g-tabs {
 display: flex;
 gap: 6px;
 margin-bottom: 8px;
}
.push-g-tab {
 border: 1px solid var(--line);
 background: var(--surface-2);
 color: var(--ink-soft);
 border-radius: var(--r-pill);
 padding: 5px 14px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
}
.push-g-tab.on {
 background: var(--accent);
 color: #fff;
 border-color: var(--accent);
}
.push-g-list {
 margin: 0 0 4px 20px;
 padding: 0;
}
.push-g-list li {
 margin: 6px 0;
 font-size: 14px;
 line-height: 1.45;
}
.push-g-foot {
 margin-top: 12px;
 display: flex;
 justify-content: flex-end;
}

/* ===== v53: сообщение «запись ремонт/материалы закрыта, ремонт уже идёт» ===== */
.book-block {
 display: flex;
 flex-direction: column;
 gap: 10px;
 background: #fdf3e3;
 border: 1px solid #f0cf9c;
 border-radius: var(--r-14);
 padding: 12px 14px;
 margin: 8px 0 2px;
 box-shadow: 0 8px 20px -14px rgba(180, 83, 9, 0.5);
}
/* ===== v213: пояснение внутри СВЕТЛОЙ карточки (не на тёмной обложке) ===== */
/* `.hero-note` — белый текст для тёмного `hero`; в белых карточках (например,
   «Договор и сроки») он сливается с фоном — для них этот класс. */
.cash-note {
 margin: 10px 0 0;
 background: #eef4ff;
 border: 1px solid #c7d8f7;
 border-radius: var(--r-10);
 padding: 8px 12px;
 font-size: 13px;
 line-height: 1.45;
 color: #1e3a8a;
}
.book-block-tx {
 flex: 1;
}
/* ===== v213: порядок «сначала материалы, потом ремонт» (владелица 12.10.2026) =====
.book-seq {
 background: #eef4ff;
 border: 1px solid #c7d8f7;
 border-radius: var(--r-14);
 padding: 10px 14px;
 margin: 8px 0 2px;
}
.book-seq-t {
 font-weight: 800;
 font-size: 14px;
 color: #1d4ed8;
 line-height: 1.3;
}
.book-seq-s {
 font-size: 13px;
 color: #334155;
 margin-top: 4px;
 line-height: 1.5;
}
/* Подпись под кнопками записи: почему сдача пока недоступна (11.09.2026) */
.book-handover-note {
 background: #fdf3e3;
 border: 1px solid #f0cf9c;
 border-radius: var(--r-md);
 padding: 10px 12px;
 margin: 8px 0 2px;
 font-size: 13px;
 line-height: 1.5;
 color: var(--ink-soft);
}
.book-block-t {
 font-weight: 800;
 font-size: 14px;
 color: #7c3f02;
 line-height: 1.3;
}
.book-block-s {
 font-size: 13px;
 color: #6b4a1a;
 margin-top: 4px;
 line-height: 1.45;
}
.book-block-acts {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

/* ===== v54: полная офлайн-база (прораб/менеджер) ===== */
.page-tools {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 margin: 0 0 10px;
}
.page-tools-t {
 font-size: 12.5px;
 color: var(--muted);
}
.off-hint {
 font-size: 12.5px;
 color: #9a5b0a;
 margin: 2px 0 6px;
 font-weight: 600;
}
/* «нет интернета и нет базы» — это не подсказка, а проблема: показываем заметно */
.off-hint-alarm {
 color: #8a1e1e;
 background: #fdecec;
 border: 1px solid #f3c9c9;
 border-radius: var(--r-10);
 padding: 10px 12px;
 line-height: 1.45;
 font-weight: 600;
}
.off-stamp {
 margin-right: auto;
 font-weight: 700;
}
.off-card {
 min-width: min(320px, 86vw);
}
.off-card-t {
 font-weight: 800;
 font-size: 15px;
 margin-bottom: 8px;
}
.off-card-s {
 font-size: 13px;
 color: var(--ink-soft);
 line-height: 1.45;
}
/* Ненавязчивая плашка «идёт обновление офлайн-базы» (02.10.2026).
   НЕ блокирует экран: фоновое обновление базы может идти минутами, человек
   должен видеть, что телефон работает, а не думать, что «зависло». */
.off-toast {
 position: fixed;
 left: 50%;
 top: 10px;
 transform: translateX(-50%);
 z-index: 90;
 display: flex;
 align-items: center;
 gap: 8px;
 max-width: min(92vw, 420px);
 padding: 7px 14px;
 border-radius: var(--r-pill);
 background: rgba(15, 23, 42, 0.86);
 color: #fff;
 font-size: 12.5px;
 line-height: 1.3;
 pointer-events: none;
 box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.6);
}
.off-toast .off-card-s {
 color: #e8f2ee;
}
.off-toast-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #34d399;
 flex: 0 0 auto;
 animation: pulse 1.2s ease-in-out infinite;
}

/* ===== v55: «клиент читал чат ЧЧ:ММ» (видно только сотрудникам) ===== */
.chat-readline {
 font-size: 12px;
 color: var(--muted);
 text-align: center;
 padding: 3px 0 0;
}

/* ===== v56: внутренний чат «Команда» (клиенты его не видят) ===== */
/* v129: окно внутреннего чата увеличено вдвое (владелица: «сделай в 2 раза
   больше, не помещается инфа»). Было 52vh. */
.team-list {
 max-height: 92vh;
 min-height: 60vh;
 overflow: auto;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 background: var(--surface);
 padding: 6px 8px;
}
.team-row {
 padding: 8px 10px;
 border-bottom: 1px dashed var(--line-soft);
}
.team-row:last-child {
 border-bottom: none;
}
.team-row-meta {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 font-size: 12px;
 color: var(--muted);
}
.team-who {
 font-weight: 700;
 color: var(--ink-soft);
}
.team-time {
 margin-left: auto;
 font-size: 12px;
}
.team-text {
 margin-top: 4px;
 font-size: 14px;
 line-height: 1.4;
 white-space: pre-wrap;
 word-break: break-word;
}
.team-apt {
 padding: 2px 10px;
 min-height: 0;
 font-size: 12px;
 border-color: var(--line);
 background: var(--surface-2);
}
.team-form select {
 flex: 0 1 150px;
}
.bot-stats {
 margin: 10px 2px 2px;
 padding: 8px 10px 4px;
 border-top: 1px dashed var(--line);
}
.bot-stats-line {
 margin: 0;
 font-size: 12px;
 line-height: 1.5;
 color: var(--muted);
}
.team-purge {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin: 6px 2px 14px;
 padding: 8px 10px;
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
 background: var(--surface-2);
}
.team-purge-lbl {
 font-size: 12.5px;
 color: var(--muted);
}
.team-purge .team-num {
 width: 90px;
 min-height: 32px;
}
.team-purge-btn {
 color: #b91c1c;
 border-color: #e2b4b4;
 background: transparent;
}
.team-purge-btn:hover {
 color: #b91c1c;
 border-color: #b91c1c;
 background: #fdf0f0;
}
.team-form .team-num {
 flex: 0 0 74px;
 min-width: 74px;
}

/* ===== v73: отпуска сотрудников ===== */
.vac-form {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin: 6px 0;
}
.vac-form input[type="date"],
.vac-form input[type="text"],
.vac-form select {
 min-height: 36px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 background: var(--surface);
 font-size: 13px;
 padding: 0 8px;
}
.vac-list {
 margin-top: 6px;
}
.vac-row {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 padding: 6px 4px;
 border-bottom: 1px dashed var(--line-soft);
}
.vac-who {
 font-weight: 700;
 font-size: 13px;
}
.vac-dates {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--ink-soft);
}
.vac-note {
 color: var(--muted);
 font-size: 12px;
}
.book-vac {
 margin: 6px 0;
 padding: 8px 10px;
 border: 1px dashed var(--accent-bright);
 background: var(--warn-bg);
 border-radius: var(--r-sm);
 font-size: 13px;
}
.book-vac-t {
 margin: 2px 0;
}

/* ===== v83: инструкция во «Внутреннем чате» ===== */
.team-help {
 margin: 4px 2px 10px;
 font-size: 13px;
}
.team-help summary {
 cursor: pointer;
 user-select: none;
 color: var(--accent-ink);
 font-weight: 600;
 padding: 4px 0;
}
.team-help summary:hover {
 text-decoration: underline;
}
.team-help-body {
 margin-top: 4px;
 padding: 10px 12px;
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
 background: var(--surface-2);
 line-height: 1.5;
}
.team-help-body p {
 margin: 0 0 6px;
}
.team-help-body li {
 margin: 4px 0;
}

/* v106: сворачиваемые панели (дашборд, сметы) */
.dash-col > h2.dash-col-head {
 position: relative;
 padding-right: 30px;
 cursor: pointer;
 user-select: none;
}
.dash-col > h2.dash-col-head::after {
 content: "▾";
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 12px;
 color: var(--muted, #888);
}
.dash-col.closed > h2.dash-col-head::after {
 content: "▸";
}
.dash-col.closed > :not(h2) {
 display: none;
}

/* v108: страница «Смета-заявки» */
.sreq-period {
 font-weight: 600;
}
.sreq-meta {
 margin: 6px 2px 10px;
}
.sreq-row {
 border-top: 1px solid var(--line, #e5e5e5);
 padding: 8px 2px;
}
.sreq-top {
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
}
.sreq-when {
 color: var(--muted, #777);
 font-size: 12px;
}
.sreq-text {
 margin: 6px 0;
 white-space: pre-wrap;
}
.sreq-att {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.sreq-img {
 /* v133: как и в чате — фиксированная рамка, чтобы список не съезжал при загрузке */
 width: 240px;
 height: 180px;
 border-radius: var(--r-xs);
 object-fit: contain;
 background: var(--surface-2);
}
.sreq-file {
 font-size: 13px;
}
.sreq-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 8px;
}
/* v111: адрес офиса менеджера в записи клиента и карточке встречи */
.book-addr {
 margin: 10px 2px 2px;
 padding: 8px 12px;
 border-radius: var(--r-10);
 background: var(--soft, #f0f4f1);
 font-weight: 600;
 font-size: 14px;
}
.meet-addr {
 margin: 4px 0 2px;
 font-size: 13px;
 color: var(--muted, #777);
}
/* v112: «Запросы к команде» на дашборде — по ролям, поквартирно */
.esc-wrap {
 display: flex;
 gap: 20px;
 flex-wrap: wrap;
 align-items: flex-start;
}
.esc-role {
 flex: 1 1 460px;
 min-width: 340px;
}
.esc-role-head {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
 margin: 8px 0;
}
.esc-role-name {
 font-weight: 700;
 font-size: 15px;
}
.esc-role-stat {
 font-size: 13px;
 color: var(--muted);
}
/* Карточка запроса: шапка (№ + время + статус) и вопрос — на всю ширину, без
   узких grid-колонок, чтобы текст не рвался по 1–2 слова на строку. */
.esc-row {
 background: var(--surface);
 border: 1px solid var(--line);
 border-left: 3px solid transparent;
 border-radius: var(--r-sm);
 padding: 10px 14px;
 margin-bottom: 8px;
 cursor: pointer;
 transition:
  border-color 0.15s,
  box-shadow 0.15s;
}
.esc-row:hover {
 border-color: var(--accent-bright);
 box-shadow: var(--shadow-md);
}
.esc-row.esc-open {
 border-left-color: var(--err);
}
.esc-row-top {
 display: flex;
 align-items: baseline;
 gap: 10px;
 flex-wrap: wrap;
}
.esc-num {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 17px;
 color: var(--ink);
}
.esc-meta {
 font-size: 12px;
 color: var(--muted);
}
.esc-pill {
 margin-left: auto;
}
.esc-q {
 margin-top: 6px;
 font-size: 14px;
 line-height: 1.45;
 overflow-wrap: anywhere;
}
.esc-more {
 margin-top: 4px;
}
/* ===== P1 (17.10.2026): загрузка, модалки, синхронизация ===== */

/* Тонкая полоса загрузки сверху. Появляется, только если запрос идёт дольше
   400 мс — фоновые опросы чата не мигают. */
.top-progress {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 z-index: 90;
 pointer-events: none;
 opacity: 0;
 transition: opacity var(--dur-1) var(--ease);
 background: linear-gradient(
  90deg,
  transparent,
  var(--accent-bright),
  transparent
 );
 transform: translateX(-100%);
}
.top-progress.on {
 opacity: 1;
 animation: progressSweep 1.1s linear infinite;
}
@keyframes progressSweep {
 from {
  transform: translateX(-100%);
 }
 to {
  transform: translateX(100%);
 }
}

/* Модалка подтверждения: плавный вход и выход (было — исчезала мгновенно). */
.ask-ov {
 transition: opacity var(--dur-2) var(--ease);
}
.ask-ov.closing {
 opacity: 0;
 pointer-events: none;
}
.ask-ov.closing .ask-card {
 transform: scale(0.985);
}

/* Скелетоны: структура вместо пустоты, пока грузятся данные. */
.skel-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 16px;
 margin-bottom: 10px;
}
.skel-line {
 height: 12px;
 border-radius: var(--r-sm);
 background: linear-gradient(
  90deg,
  var(--line-soft) 25%,
  var(--surface-2) 37%,
  var(--line-soft) 63%
 );
 background-size: 400% 100%;
 animation: skelShimmer 1.6s linear infinite;
}
.skel-line + .skel-line {
 margin-top: 8px;
}
.skel-line.w60 {
 width: 60%;
}
.skel-line.w40 {
 width: 40%;
}
@keyframes skelShimmer {
 from {
  background-position: 100% 0;
 }
 to {
  background-position: 0 0;
 }
}

/* Вернулись на связь — короткая вспышка бренда, как свежий штамп в журнале. */
.brand.synced {
 animation: syncedFlash 0.6s var(--ease);
}
@keyframes syncedFlash {
 0% {
  filter: none;
 }
 35% {
  filter: drop-shadow(0 0 10px rgba(180, 83, 9, 0.45));
 }
 100% {
  filter: none;
 }
}

/* WCAG 2.4.1 «Обход блоков»: ссылка «к содержимому» видна только при фокусе */
.skip-link {
 position: fixed;
 top: 8px;
 left: 50%;
 transform: translate(-50%, -200%);
 z-index: 200;
 background: var(--ink);
 color: #fff;
 padding: 10px 16px;
 border-radius: var(--r-10);
 font-weight: 700;
 text-decoration: none;
 transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
 transform: translate(-50%, 0);
 outline: 3px solid var(--accent-bright);
 outline-offset: 2px;
}
@media print {
 .skip-link {
  display: none;
 }
}

@media print {
 /* В печать — без входных анимаций (P1, 17.10.2026): у fadeUp начальное
    состояние opacity 0, и в PDF/на бумаге блоки могли оказаться пустыми. */
 .panel,
 .kpi,
 .apt-row,
 .login-card,
 .client-card,
 .side-item.active,
 .content.content-enter,
 .content > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
 }

 .topbar,
 .side,
 .no-print {
  display: none !important;
 }
 #content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
 }
 .sreq-img {
  max-width: 120px;
 }
}

/* ===== v108: фильтры внутреннего чата + личные сообщения ===== */
.team-filters {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 8px 0 4px;
}
.team-chip {
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--ink-soft);
 border-radius: var(--r-pill);
 padding: 5px 12px;
 font-size: 13px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
}
.team-chip:hover {
 border-color: var(--ink-soft);
}
.team-chip.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}
.team-chip-n {
 background: rgba(31, 42, 46, 0.12);
 border-radius: var(--r-pill);
 padding: 0 6px;
 font-size: 12px;
 font-weight: 700;
}
.team-chip.active .team-chip-n {
 background: rgba(255, 255, 255, 0.28);
}
.team-chip-new.active {
 background: var(--ok);
 border-color: var(--ok);
}
.team-filter-apt {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin: 2px 0 8px;
 font-size: 13px;
}
.team-priv-hint {
 margin-top: 6px;
 font-size: 13px;
 line-height: 1.4;
 color: var(--ink-soft);
 background: var(--warn-bg);
 border: 1px dashed var(--warn);
 border-radius: var(--r-10);
 padding: 6px 9px;
}
.tag-lock {
 border: 1px solid var(--accent);
 color: var(--accent-ink);
 background: var(--surface-2);
}
.chat-reply:hover {
 color: var(--accent);
}
/* ===== v110: кнопки задания в ленте ===== */
.team-task-btns {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 6px;
}
/* ===== v114: чипы «нет данных для контроля» на дашборде ===== */
.apt-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 6px;
}
/* ===== v127: панель «Требуют звонка» — кто не реагирует на смету ===== */
.no-react {
 border-left: 4px solid var(--err, #c0392b);
}
.no-react-warn {
 background: var(--warn-bg, #fdf3d8);
 color: var(--ink-soft);
 border-radius: var(--r-10);
 padding: 10px 12px;
 font-size: 14px;
 margin-bottom: 8px;
}
.no-react-group {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 14px;
 margin: 12px 0 4px;
}
.no-react-apt {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 15px;
}
.no-react .meet-done {
 align-items: flex-start;
}
.no-react .meet-done > div:first-child {
 flex: 1 1 260px;
}

/* ===== v138: история согласования смет — постоянный список (владелица 14.09.2026) =====
   Смысл блока: уведомление «смета согласована» исчезает после просмотра, а
   согласованная смета уходит из списка — так номера квартир негде посмотреть.
   Список растёт, поэтому он сворачивается (details/summary). */
.hist {
 border-left: 4px solid var(--ok, #2f7d4a);
}
.hist-box {
 margin-top: 8px;
}
.hist-sum {
 cursor: pointer;
 user-select: none;
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 14px;
 color: var(--accent-ink);
 padding: 4px 0;
}
.hist-sum:hover {
 color: var(--accent);
}
.hist-day {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin: 12px 0 4px;
 padding-bottom: 4px;
 border-bottom: 1px solid var(--line);
}
.hist-day-t {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 14px;
}
.hist-apt {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 15px;
}
.hist .meet-done {
 align-items: flex-start;
}
.hist .meet-done > div:first-child {
 flex: 1 1 260px;
}

/* ===== v128: заявки по смете — автор (клиент или сотрудник) ===== */
.sreq-staff {
 background: #fdf1e3;
 color: #8a5a1a;
}
.sreq-client {
 background: #eef4fb;
 color: #2c5c8f;
}

/* ===== v129: плашка фото, пока картинка грузится ===== */
.chat-img-ph {
 width: 220px;
 height: 220px;
 box-sizing: border-box;
 margin-top: 6px;
 padding: 8px;
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
 background: var(--surface-2);
 color: var(--muted);
 font-size: 13px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 overflow: hidden;
}
.chat-img-ph-err {
 border-color: var(--err, #c0392b);
 color: var(--err, #c0392b);
}
.chat-img {
 cursor: zoom-in;
}

/* ===== v129: кнопка «перейти к фото» в чате с квартирой ===== */
.chat-photo-jump {
 align-self: flex-start;
 margin: 0 0 6px;
}

/* ===== v130: самопроверка уведомлений (настройки → помощь) ===== */
.push-check-rows {
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin: 6px 0;
}
.push-check-row {
 display: flex;
 gap: 8px;
 align-items: flex-start;
 font-size: 14px;
}
.push-check-ok {
 color: var(--ok, #2f7d4a);
 font-weight: 700;
}
.push-check-no {
 color: var(--err, #c0392b);
 font-weight: 700;
}
.push-check-btns {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 8px;
}
/* ===== v165: понятная подсказка, если уведомления не включаются (владелица 20.09.2026) ===== */
.push-check-note {
 margin-top: 10px;
 padding: 8px 10px;
 border-left: 3px solid var(--line);
 background: var(--surface-2);
 border-radius: var(--r-sm);
 font-size: 12.5px;
 line-height: 1.5;
 color: var(--ink-soft);
}

/* ===== v131: Telegram-привязка в справке ===== */
.hlp-sec .push-check-btns .chat-link {
 cursor: pointer;
}

/* ===== v132: видео в чате (13.09.2026 — клиенты просили присылать видео) ===== */
.chat-video {
 width: 320px;
 max-width: 100%;
 height: 180px;
 border-radius: var(--r-sm);
 margin-top: 6px;
 background: #000;
 display: block;
}
.chat-video-ph {
 width: 320px;
 max-width: 100%;
 height: 180px;
 box-sizing: border-box;
 margin-top: 6px;
 padding: 8px;
 border: 1px dashed var(--line);
 border-radius: var(--r-sm);
 background: var(--surface-2);
 color: var(--muted);
 font-size: 13px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 overflow: hidden;
}

/* ===== v136: строка «Найдено: N» в списке квартир ===== */
.apt-count {
 margin: 6px 0 2px;
 font-size: 13px;
 color: var(--muted);
}

/* v140: «Анастасия печатает…» во «Внутреннем чате» — пока ответ
   генерируется в фоне (15.09.2026). Слегка приглушённый текст с мерцанием. */
.bot-typing .chat-text {
 opacity: 0.65;
 font-style: italic;
}
.bot-typing .chat-text::after {
 content: "";
 animation: botdots 1.2s steps(4, end) infinite;
}
@keyframes botdots {
 0% {
  content: "";
 }
 25% {
  content: ".";
 }
 50% {
  content: "..";
 }
 75% {
  content: "...";
 }
}
/* ===== v151: внутренний чат на телефоне — как мессенджер (18.09.2026) =====
   Владелица: «исправь вид внутреннего чата для мобильной версии».
   Было на 390×844: описание раздела (4 строки) + 4 строки фильтров + строка
   фильтра по квартире в две строки + лента 92vh + композер 142px → страница
   высотой ~1620px, поле ввода за экраном, две прокрутки (страница + лента). */
@media (max-width: 640px) {
  /* Страница чата — вертикальный стек: шапка/фильтры сверху, лента по центру,
     композер внизу. Ничего не «уезжает» за экран. */
  #content.team-page {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
  }
  /* Описания раздела дублирует «инструкцию» строкой ниже — на телефоне прячем */
  #content.team-page .page-desc {
    display: none;
  }
  #content.team-page .team-help {
    margin: 0 0 6px;
  }
  #content.team-page .team-help summary {
    font-size: 13px;
  }
  /* Фильтры — одна строка с горизонтальной прокруткой вместо четырёх */
  #content.team-page .team-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 0 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* мягкий край — видно, что строку фильтров можно листать вбок */
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    -webkit-mask-image: linear-gradient(
      to right,
      #000 calc(100% - 18px),
      transparent
    );
  }
  #content.team-page .team-filters::-webkit-scrollbar {
    display: none;
  }
  #content.team-page .team-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 5px 11px;
  }
  /* Фильтр по квартире — одной строкой, подпись не нужна */
  #content.team-page .team-filter-apt {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 12.5px;
  }
  #content.team-page .team-filter-apt .subtle {
    display: none;
  }
  #content.team-page .team-filter-apt .team-num {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
  }
  #content.team-page .team-filter-apt .btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
  }
  /* Лента: половина экрана и своя прокрутка — композер больше не уезжает */
  #content.team-page .chat.team-list {
    flex: 1 1 auto;
    /* высота ленты подбирается так, чтобы композер всегда был на экране:
       остаток экрана минус шапка, нижнее меню и высота всего, что над лентой */
    min-height: 180px;
    max-height: min(48vh, calc(100dvh - 57px - var(--bottom) - 350px));
    margin: 0 0 6px;
    overscroll-behavior: contain;
  }
  /* Длинные сообщения «Анастасии» — шире, меньше строк */
  #content.team-page .chat-msg {
    max-width: 94%;
  }
  /* Композер компактнее: те же кнопки, но ниже ростом */
  #content.team-page .chat-form {
    margin-top: 0;
    gap: 6px;
  }
  #content.team-page .chat-form-client textarea {
    min-height: 44px;
    padding: 8px 10px;
  }
  #content.team-page .chat-form-client textarea {
    max-height: 120px;
  }
  /* в одной строке: «Кому» + № кв + прикрепить + голос, ниже — «Отправить» */
  #content.team-page .chat-form-bar select {
    flex: 0 1 118px;
    min-width: 96px;
    min-height: 36px;
    padding: 0 6px;
    font-size: 13px;
  }
  #content.team-page .chat-form-bar .team-num {
    flex: 1 1 70px;
    min-width: 64px;
    min-height: 36px;
    padding: 0 8px;
    font-size: 14px;
  }
  #content.team-page .chat-ico {
    width: 36px;
    height: 36px;
    border-radius: var(--r-10);
  }
  #content.team-page .chat-form-spacer {
    display: none;
  }
  #content.team-page .chat-form-bar .btn {
    flex: 1 1 100%;
    min-height: 40px;
  }
  /* Статистика бота и удаление переписки — после чата, не мешают вводу */
  #content.team-page .bot-stats {
    order: 20;
  }
  #content.team-page .team-purge {
    order: 21;
  }
}

/* ===== v152: массовая рассылка клиентам (вкладка внутри «Ссылок») ===== */
.bc-tabs {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin: 6px 0 10px;
}
.bc-text {
 width: 100%;
 box-sizing: border-box;
 min-height: 110px;
 padding: 10px 12px;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 font: inherit;
 font-size: 15px;
 line-height: 1.45;
 background: var(--surface);
 resize: vertical;
}
.bc-modes {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin: 10px 0 6px;
}
.bc-search {
 width: 100%;
 box-sizing: border-box;
 min-height: 42px;
 padding: 0 12px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 font-size: 15px;
 background: var(--surface);
 margin-bottom: 6px;
}
.bc-list {
 max-height: 320px;
 overflow: auto;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 background: var(--surface);
}
.bc-row {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 8px 12px;
 border-bottom: 1px dashed var(--line-soft);
 cursor: pointer;
}
.bc-row:last-child {
 border-bottom: none;
}
.bc-row input {
 width: 20px;
 height: 20px;
 flex: none;
}
.bc-num {
 font-weight: 700;
 min-width: 68px;
}
.bc-row .subtle {
 font-size: 12px;
}
.bc-count {
 margin-left: auto;
 font-weight: 700;
 font-size: 13px;
 color: var(--accent-ink);
}
.bc-opt {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 10px 0 4px;
 font-size: 13px;
}
.bc-opt input {
 width: 20px;
 height: 20px;
}
.bc-preview {
 margin: 8px 0;
 padding: 10px 12px;
 border: 1px dashed var(--line);
 border-radius: var(--r-md);
 background: var(--surface-2);
 font-size: 13px;
 line-height: 1.5;
}
.bc-warn {
 margin-top: 6px;
 color: #8a5a00;
 background: #fde9c8;
 border-radius: var(--r-xs);
 padding: 6px 8px;
 font-size: 12.5px;
}
.bc-ok {
 font-weight: 700;
 color: var(--accent-ink);
 margin-bottom: 4px;
}
.bc-result {
 margin-top: 10px;
 font-size: 13px;
}
@media (max-width: 640px) {
 .bc-list {
  max-height: 46vh;
 }
 .bc-text {
  min-height: 96px;
 }
}

/* Метка «ламинат: замена» в списке выбора рассылки (v153) */
.bc-lam {
 background: var(--warn-bg);
 color: #8a5a00;
 border: 1px solid var(--warn);
 border-radius: var(--r-pill);
 padding: 1px 8px;
 font-size: 12px;
 font-weight: 700;
 white-space: nowrap;
}

/* ===== v158: «Клиент в приложении» — верхнее поле карточки квартиры =====
   Владелица 20.09.2026: сколько раз заходил, что открывал, что читал —
   без поиска по чатам. */
.cv-box {
 margin: 8px 0 2px;
 padding: 10px 12px;
 border: 1px dashed var(--line);
 border-radius: var(--r-md);
 background: var(--surface-2);
 /* Блок светлый, а лежит ВНУТРИ .hero, у которого color: #fff (тёмно-зелёный
  градиент). Без явного цвета весь текст блока наследовал БЕЛЫЙ и был
  невидим на светлом фоне — жалоба владелицы 20.09.2026 (не читался заголовок
  «Клиент в приложении»). Теперь цвет задан здесь, и блок не зависит от
  родителя. */
 color: var(--ink);
 font-size: 13px;
 line-height: 1.5;
}
.cv-title {
 font-weight: 700;
 margin-bottom: 4px;
 /* явно: заголовок не должен зависеть от цвета родителя */
 color: var(--ink);
}
.cv-line {
 color: var(--ink-soft);
}
.cv-hist {
 margin-top: 6px;
}
.cv-hist summary {
 cursor: pointer;
 font-size: 12.5px;
 color: var(--accent-ink);
}
.cv-hist-row {
 font-size: 12.5px;
 /* было var(--muted) — на светлом фоне контраст ~3:1, мелкий текст читался
  плохо (это тот же блок, та же жалоба) */
 color: var(--ink-soft);
 padding: 2px 0 0 10px;
}

/* ===== v161: Фото для Анастасии (владелица загружает один раз, бот отправляет) ===== */
.bc-photo-form {
 max-width: 640px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin: 10px 0 16px;
}
.bc-photo-form .btn {
 align-self: flex-start;
}
.bc-photo-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
/* строка списка: миниатюра + описание + действие */
.bc-photo-row {
 align-items: center;
}
/* несколько фото у одного материала (владелица, 21.09.2026) */
.bc-photo-thumbs {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 flex: 0 0 auto;
 max-width: 270px;
}
.bc-photo-thumb {
 width: 84px;
 height: 84px;
 flex: 0 0 84px;
 object-fit: cover;
 border-radius: var(--r-10);
 border: 1px solid var(--line);
 background: var(--surface-2);
}
/* файл не отдался (нет сети / потерян) — не «битая иконка», а понятная рамка */
.bc-photo-thumb-err {
 border-style: dashed;
 background: repeating-linear-gradient(
  45deg,
  var(--surface-2),
  var(--surface-2) 6px,
  var(--line-soft) 6px,
  var(--line-soft) 12px
 );
}

/* ===== v183: технический раздел — график роста и выбор показателя ===== */
.tech-select {
  margin: 4px 0 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  max-width: 260px;
}
.tech-chart {
  margin-top: 4px;
}
.tech-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.tech-chart-svg .grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.tech-chart-svg .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tech-chart-svg .dot {
  fill: var(--accent);
}
.tech-chart-svg .t {
  font-size: 12px;
  fill: var(--muted);
}

/* ===== v185: документ «Несогласованные сметы» (таблица + печать) ===== */
.follow-wrap {
  overflow-x: auto;
}
.follow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.follow-table th,
.follow-table td {
  border: 1px solid var(--line);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}
.follow-table th {
  background: var(--surface-2);
  font-weight: 600;
}
.follow-table td.num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.follow-table tr:nth-child(even) td {
  background: var(--surface-2);
}
.follow-table .follow-warn {
  color: var(--err);
  font-weight: 600;
}

@media print {
  .follow-table {
    font-size: 11px;
  }
  .follow-table th,
  .follow-table td {
    padding: 2px 4px;
  }
  .panel {
    break-inside: auto;
  }
  .follow-table tr {
    break-inside: avoid;
  }
}

/* ===== v189: график встреч таблицей (квартиры × дни) =====
   Отдельная вкладка «График» у менеджера и прораба: квартиры по строкам, дни по
   столбцам, в клетке — вид встречи и время. Шапка и первый столбец «липкие»,
   таблица прокручивается по горизонтали (в т.ч. на телефоне прораба). */
.mgrid-view-tabs { margin-bottom: 10px; }
.mgrid-ctrls {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 14px;
 align-items: center;
 margin-bottom: 6px;
}
.mgrid-scopes { margin-bottom: 8px; }
.mgrid-scopes .label { margin-right: 2px; color: var(--ink-soft); font-size: 12.5px; }
.mgrid-sub { margin: 2px 0 10px; }
.mgrid-info { margin-top: 10px; font-weight: 600; }
.mgrid-wrap {
 position: relative;
 overflow-x: auto;
 overflow-y: hidden;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 background: var(--surface);
 -webkit-overflow-scrolling: touch;
}
.mgrid { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.mgrid th,
.mgrid td {
 border-bottom: 1px solid var(--line-soft);
 border-right: 1px solid var(--line-soft);
 padding: 4px 6px;
}
.mgrid thead th {
 position: sticky;
 top: 0;
 z-index: 2;
 background: var(--surface-2);
 color: var(--ink-soft);
 font-weight: 600;
 text-align: center;
 white-space: nowrap;
}
.mgrid thead th.today { background: var(--ok-bg); color: var(--ok); }
.mgrid thead th.weekend { background: #f7f4ec; }
.mgrid-day .mgrid-wd { display: block; font-size: 11px; font-weight: 600; }
.mgrid-day .mgrid-dd { display: block; font-size: 11px; font-variant-numeric: tabular-nums; }
.mgrid .mgrid-apt {
 position: sticky;
 left: 0;
 z-index: 1;
 background: var(--surface);
 white-space: nowrap;
 font-weight: 600;
 text-align: left;
 min-width: 76px;
}
.mgrid thead .mgrid-apt-h { z-index: 4; background: var(--surface-2); }
.mgrid tbody tr:hover .mgrid-apt { background: var(--surface-2); }
.mgrid-cell { text-align: center; vertical-align: middle; min-width: 64px; }
.mgrid-cell.today { background: #f3faf5; }
.mgrid-cell.weekend { background: #fbf9f4; }
.mgrid-dot { color: #d3d8d2; }
.mchip {
 display: inline-flex;
 align-items: center;
 gap: 3px;
 border: 1px solid transparent;
 border-radius: var(--r-xs);
 padding: 1px 5px 1px 2px;
 margin: 1px;
 font: inherit;
 font-size: 12px;
 line-height: 1.15;
 white-space: nowrap;
 cursor: pointer;
}
.mchip .mti { box-shadow: none; }
.mchip-t { font-variant-numeric: tabular-nums; }
.mchip-green { background: var(--ok-bg); color: var(--ok); }
.mchip-orange { background: var(--warn-bg); color: var(--warn); }
.mchip-grey { background: #eef0ec; color: var(--ink-soft); }
.mchip-red { background: var(--err-bg); color: var(--err); }
.mchip:hover { filter: brightness(0.96); }
.mgrid-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 14px;
 align-items: center;
 margin-top: 10px;
 font-size: 12px;
 color: var(--ink-soft);
}
.mgrid-leg { display: inline-flex; align-items: center; gap: 4px; }
.mgrid-leg-chip { pointer-events: none; min-width: 16px; height: 12px; padding: 0 8px; }
@media print {
 .mgrid-wrap { overflow: visible; border: 0; border-radius: 0; }
 .mgrid { font-size: 11px; width: 100%; }
 .mgrid .mgrid-apt,
 .mgrid thead th { position: static; }
 .mgrid th,
 .mgrid td { padding: 2px 3px; }
 .mchip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== v190: график встреч на телефоне — видна целая неделя =====
   Менеджер и прораб чаще всего смотрят график с телефона. На узком экране
   таблица занимает ширину один-в-один (table-layout: fixed), клетка — тонкая
   вертикальная фишка «значок + время», а сам период JS режет по неделям, чтобы
   неделя помещалась целиком без горизонтальной прокрутки. */
@media screen and (max-width: 768px) {
 .mgrid-panel {
  padding: 10px 8px 12px;
 }
 .mgrid-ctrls {
  gap: 6px 10px;
  margin-bottom: 4px;
 }
 .mgrid-scopes {
  margin-bottom: 6px;
 }
 .mgrid-sub {
  font-size: 12px;
  margin: 2px 0 8px;
 }
 .mgrid-week {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 10px 0 4px;
 }
 .mgrid-wrap {
  overflow-x: visible;
  border-radius: var(--r-10);
 }
 .mgrid {
  table-layout: fixed;
  width: 100%;
  font-size: 11px;
 }
 .mgrid th,
 .mgrid td {
  padding: 1px 0;
  border-right: 0;
 }
 /* без горизонтальной прокрутки «липкие» шапка и столбец не нужны */
 .mgrid thead th,
 .mgrid .mgrid-apt {
  position: static;
 }
 .mgrid .mgrid-apt {
  width: 38px;
  min-width: 0;
  padding-left: 3px;
  font-size: 11px;
 }
 .mgrid thead .mgrid-apt-h {
  font-size: 11px;
 }
 .mgrid-day .mgrid-wd,
 .mgrid-day .mgrid-dd {
  font-size: 11px;
 }
 .mgrid-cell {
  min-width: 0;
  padding: 1px 0;
 }
 .mchip {
  flex-direction: column;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 1px 1px;
  border-radius: var(--r-sm);
  font-size: 12px;
 }
 .mchip .mti {
  width: 15px;
  height: 15px;
  border-radius: 5px;
 }
 .mgrid-legend {
  font-size: 11px;
  gap: 4px 10px;
  margin-top: 8px;
 }
 .mgrid-view-tabs {
  margin-bottom: 8px;
 }
}

/* ===== v191: техчасть по сметам («Несогласованные сметы») на телефоне =====
   У менеджера это единственная вкладка техраздела, и она открывается с телефона.
   Таблица на 12 колонок на узком экране сжималась и требовала прокрутки вбок
   (замер 360 px: таблица 881 px, строки по 126 px). На телефоне превращаем
   каждую строку в карточку «подпись → значение», заголовки колонок берём из
   data-label (их проставляет followTable). */
@media screen and (max-width: 768px) {
  .follow-wrap {
    overflow-x: visible;
  }
  .follow-table {
    font-size: 13px;
  }
  .follow-table thead {
    display: none;
  }
  .follow-table,
  .follow-table tbody,
  .follow-table tr,
  .follow-table td {
    display: block;
    width: auto;
  }
  .follow-table tr {
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    background: var(--surface);
    padding: 8px 10px;
    margin-bottom: 8px;
    /* по два поля в ряд, чтобы карточка не растягивалась на 12 строк */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    align-items: start;
  }
  .follow-table tr:nth-child(even) td {
    background: transparent;
  }
  .follow-table td {
    border: 0;
    padding: 0;
    text-align: left;
    white-space: normal;
    display: block;
  }
  .follow-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.25;
  }
  .follow-table td.num {
    white-space: normal;
  }
  /* Пустые поля на телефоне не показываем (на большом экране они видны) */
  .follow-table td.is-empty {
    display: none;
  }
  /* Номер квартиры и «что делать» — во всю ширину */
  .follow-table td[data-label="№ кв"],
  .follow-table td[data-label="Что делать"] {
    grid-column: 1 / -1;
  }
  .follow-table td[data-label="№ кв"] {
    font-size: 15.5px;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 2px;
  }
  .follow-table td[data-label="№ кв"]::before {
    display: inline;
    content: "Кв. ";
    font-size: 13px;
    font-weight: 600;
  }
  .follow-table td[data-label="Что делать"] {
    padding-top: 5px;
    margin-top: 3px;
    border-top: 1px solid var(--line-soft);
  }
  .follow-table td[data-label="Что делать"]::before {
    display: none;
  }
  /* KPI: на телефоне по две в ряд (было по одной — пять карточек подряд) */
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
  }
  .kpi {
    padding: 10px 12px;
  }
  .kpi .k {
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  .kpi .v {
    font-size: 21px;
  }
  .no-react-warn {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* ===== v192: ПЕЧАТЬ документа «Несогласованные сметы» — весь документ целиком =====
   Владелица 28.09.2026: «нужно дать возможность распечатать этот график весь,
   чтобы была кнопка печать». На бумаге 12 колонок сжимались в 756 px (шрифт
   9–10 px, всё рвётся). Теперь печать идёт АЛЬБОМНЫМ листом (@page задаёт JS
   при открытой вкладке), колонки фиксированной ширины, шапка таблицы
   повторяется на каждой странице, а сверху печатается заголовок с датой. */
.print-head {
  display: none;
}
@media print {
  .follow-wrap {
    overflow: visible !important;
  }
  .follow-table {
    /* fixed + width:100% — таблица всегда ровно по ширине листа, ничего не режется */
    table-layout: fixed;
    width: 100%;
    font-size: 11px;
  }
  .follow-table th,
  .follow-table td {
    padding: 2px 3px;
    overflow-wrap: anywhere;
  }
  .follow-table thead {
    display: table-header-group; /* заголовки колонок на каждой странице */
  }
  .follow-table tr {
    break-inside: avoid;
  }
  .follow-table td.num {
    white-space: normal;
  }
  /* Ширины колонок (12 штук, сумма 100 %) — чтобы «Что делать» не сжималось */
  .follow-table th:nth-child(1) {
    width: 5%;
  }
  .follow-table th:nth-child(2) {
    width: 9%;
  }
  .follow-table th:nth-child(3) {
    width: 4%;
  }
  .follow-table th:nth-child(4) {
    width: 8%;
  }
  .follow-table th:nth-child(5) {
    width: 8%;
  }
  .follow-table th:nth-child(6) {
    width: 5%;
  }
  .follow-table th:nth-child(7) {
    width: 11%;
  }
  .follow-table th:nth-child(8) {
    width: 10%;
  }
  .follow-table th:nth-child(9) {
    width: 5%;
  }
  .follow-table th:nth-child(10) {
    width: 5%;
  }
  .follow-table th:nth-child(11) {
    width: 10%;
  }
  .follow-table th:nth-child(12) {
    width: 20%;
  }
  .print-head {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 8px;
  }
  .print-head .ph-sub {
    display: block;
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 11px;
    color: #444;
    margin-top: 2px;
  }
  .print-foot {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #666;
  }
}

/* ===== v200: ПЕЧАТЬ СМЕТЫ (владелец и менеджер) — лист A4, только смета =====
   Владелица 02.10.2026: печатать смету может владелец и менеджер (НЕ клиент),
   кнопка — «Распечатать». Кнопка собирает отдельный контейнер #print-estimate
   (вне интерфейса) и ставит на <body> класс `printing-estimate`; на бумаге виден
   ТОЛЬКО #print-estimate, @page A4 задаёт JS (setPrintPageRule). */
.print-estimate {
  display: none;
}
@media print {
  body.printing-estimate > *:not(.print-estimate) {
    display: none !important;
  }
  body.printing-estimate .print-estimate {
    display: block !important;
    margin: 0;
    padding: 0;
    background: none;
  }
  /* Таблица и пункты: помельче обычного, строка не рвётся между страницами */
  body.printing-estimate .print-estimate .smeta-table {
    font-size: 12px;
    border: 1px solid #999;
    border-radius: 0;
    background: none;
  }
  body.printing-estimate .print-estimate .smeta-tr {
    break-inside: avoid;
    border-bottom: 1px solid #ddd;
  }
  body.printing-estimate .print-estimate .smeta-work-name {
    font-size: 12.5px;
  }
  body.printing-estimate .print-estimate .smeta-work-meta {
    font-size: 11px;
  }
  body.printing-estimate .print-estimate .smeta-m-sum,
  body.printing-estimate .print-estimate .smeta-total .smeta-td-sum {
    font-size: 12.5px;
  }
}

/* ===== v209: ПЕЧАТЬ СПИСКА «ПОЧТИ ГОТОВЫ» — лист A4 (владелица 09.10.2026) =====
   Кнопка «🖨 Печать списка» в блоке «Почти готовы» собирает отдельный контейнер
   #print-ready (вне интерфейса) и ставит на <body> класс `printing-ready` —
   на бумаге виден ТОЛЬКО этот контейнер. @page A4 задаёт JS (printNow). */
.print-ready {
  display: none;
}
@media print {
  body.printing-ready > *:not(.print-ready) {
    display: none !important;
  }
  body.printing-ready .print-ready {
    display: block !important;
    margin: 0;
    padding: 0;
    background: none;
  }
  body.printing-ready .print-ready .print-head {
    display: block;
  }
  body.printing-ready .print-ready .ready-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  body.printing-ready .print-ready .ready-table thead {
    display: table-header-group; /* шапка повторяется на каждой странице */
  }
  body.printing-ready .print-ready .ready-table tr {
    break-inside: avoid;
  }
  body.printing-ready .print-ready .ready-table th,
  body.printing-ready .print-ready .ready-table td {
    border: 1px solid #999;
    padding: 3px 5px;
    text-align: left;
    vertical-align: top;
  }
  body.printing-ready .print-ready .ready-table th {
    background: #f0f0f0;
    font-weight: 600;
  }
  body.printing-ready .print-ready .ready-table td.rn {
    white-space: nowrap;
    text-align: right;
  }
}

/* ===== v210: КНОПКА «НАВЕРХ» на длинных страницах (владелица 09.10.2026) =====
   Запрос: «на страницах, где длинное пролистывание вниз, возможность одним
   нажатием вернуться вверх страницы». Кнопка живёт на <body> (одна на всё
   приложение), появляется только когда страница прокручена (вешает/снимает
   класс .on из JS), на печать не идёт. z-index ниже оверлеев (90+), но выше
   нижней навигации (20) — поверх контента, но под модалками. */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.to-top.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:active {
  transform: scale(0.94);
}
@media (max-width: 768px) {
  /* На телефоне внизу — нижняя навигация (--bottom): кнопку ставим ВЫШЕ неё,
     иначе она перекроет пункты меню */
  .to-top {
    right: 12px;
    bottom: calc(var(--bottom) + 12px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
}
@media print {
  .to-top {
    display: none !important;
  }
}

/* ===== Просмотр вложения ПОВЕРХ приложения (14.10.2026) =====
   Зачем: iOS/iPadOS НЕ открывает blob:-ссылку как страницу — Safari падает
   с «WebKitBlobResource, ошибка 1» (менеджер, 14.10.2026: тап по вложению в
   чате). Фото/видео показываем здесь, чтобы вообще не уходить со страницы. */
.blob-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 16, 20, 0.94);
  overflow: auto;
  -webkit-tap-highlight-color: transparent;
}
.blob-viewer-bar {
  width: 100%;
  max-width: 960px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blob-viewer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eef2f5;
  font-size: 14px;
}
/* на тёмном фоне обычные кнопки-призраки не видны — светлая схема */
.blob-viewer .blob-viewer-btn {
  flex: none;
  background: rgba(255, 255, 255, 0.14);
  color: #f4f7f9;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.blob-viewer .blob-viewer-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.blob-viewer-media {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  object-fit: contain;
  border-radius: var(--r-xs);
  background: #000;
}
/* Карточка документа в просмотре (15.10.2026): на iPhone вместо скачивания
   показываем файл и кнопку «Сохранить» — системное меню «Поделиться». */
.blob-viewer-file {
  width: 100%;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 18px;
  border-radius: var(--r-14);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}
.blob-viewer-file-ico {
  font-size: 46px;
  line-height: 1;
}
.blob-viewer-file-name {
  color: #eef2f5;
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
}
.blob-viewer-file-hint {
  color: rgba(238, 242, 245, 0.72);
  font-size: 13px;
  line-height: 1.45;
}/* ---------- Договора: дата договора (владелица, 25.10.2026) ---------- */
/* Оформление в стиле CRM: тёплая палитра «журнала», поля 48 px,
   янтарное кольцо фокуса, разделители --line-soft, номера — Unbounded. */
.contract-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}
.contract-toolbar .search-row {
  margin: 0;
  flex: 1 1 260px;
}
.contract-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contract-row {
  display: grid;
  grid-template-columns: 84px minmax(150px, 1fr) 200px 190px 190px 112px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-2) var(--ease);
}
.contract-row:hover {
  background: var(--surface-2);
}
.contract-row.contract-head {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding-top: 4px;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
}
.contract-row.contract-head:hover {
  background: transparent;
}
/* Фильтры: чипы в стиле CRM (active — янтарный, как акцент) */
.contract-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.contract-filter {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.contract-filter:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.contract-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--ring);
}
.contract-filter.is-on {
  background: var(--warn-bg);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.contract-date {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-10);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.contract-date:hover {
  border-color: var(--ink-soft);
}
.contract-date:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.contract-date:disabled {
  opacity: 0.6;
  cursor: progress;
}
.contract-term {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.contract-term small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.contract-term.over {
  color: var(--err);
  font-weight: 600;
}
.contract-act {
  justify-self: end;
}
@media (max-width: 1080px) {
  .contract-row {
    grid-template-columns: 72px minmax(130px, 1fr) 180px 170px 170px;
  }
  .contract-act {
    display: none;
  }
}
@media (max-width: 900px) {
  .contract-row.contract-head {
    display: none;
  }
  .contract-row {
    grid-template-columns: 64px 1fr;
    row-gap: 8px;
    padding: 14px 12px;
  }
  .contract-row > .contract-date,
  .contract-row > .contract-term,
  .contract-row > .contract-act {
    grid-column: 2;
  }
  .contract-date {
    min-height: 48px;
    font-size: 16px;
  }
  .contract-act {
    justify-self: start;
  }
}