/* ============================================================
   ЖУРНАЛ ОБЪЕКТА — концепция «Журнал» (тёплый, рабочий, диспетчерский)
   Стек: ванильный 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: #8a9498;
 --line: #e4e1d5; /* «журнальная» линия */
 --line-soft: #efede3;
 --accent: #b45309; /* глубокий янтарь (кнопки, акцент) */
 --accent-bright: #d97706;
 --accent-ink: #7c3f02;
 --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;

 --r-sm: 6px;
 --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;
}

* {
 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: 8px;
 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: 10px;
}
.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);
 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: 999px;
 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;
 background: rgba(246, 247, 243, 0.92);
 backdrop-filter: blur(6px);
 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: 11px;
 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: 999px;
 background: var(--err);
 color: #fff;
 font-family: var(--font-mono);
 font-size: 11px;
 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 {
 animation: badgePulse 1.2s infinite;
}
@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;
 background: rgba(255, 255, 255, 0.96);
 backdrop-filter: blur(8px);
 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: 11px;
 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: 1023px) {
 .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;
}
.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: 12px;
 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: 12px;
 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: 12px;
 overflow: hidden;
 background: var(--surface-2);
 margin: 2px 0 6px;
}
.smeta-tr {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto auto auto;
 gap: 2px 12px;
 align-items: center;
 padding: 6px 12px;
 border-bottom: 1px dashed var(--line-soft);
}
.smeta-tr:last-child {
 border-bottom: none;
}
.smeta-th {
 background: var(--surface);
}
.smeta-th .smeta-td-name,
.smeta-th .smeta-td-num,
.smeta-th .smeta-td-sum {
 font-size: 10.5px;
 letter-spacing: 0.07em;
 text-transform: uppercase;
 font-weight: 800;
 color: var(--muted);
 font-family: var(--font-display);
}
.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 {
 grid-template-columns: 1fr;
 background: var(--surface);
}
.smeta-section .smeta-td-name {
 grid-column: 1 / -1;
 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);
}
.smeta-total .smeta-td-name {
 grid-column: 1 / 4;
 font-weight: 800;
 font-size: 14px;
 color: var(--accent-ink);
}
.smeta-total .smeta-td-sum {
 grid-column: 4;
 font-weight: 800;
 font-size: 15px;
 color: var(--accent-ink);
}
.smeta-hint {
 font-size: 12px;
 color: var(--muted);
 background: var(--surface-2);
 border: 1px dashed var(--line);
 border-radius: 10px;
 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: 11.5px;
}
.row-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 8px;
}
.mat-cat {
 margin-bottom: 10px;
}
.mat-title {
 font-size: 11px;
 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: 11px;
 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: 767px) {
 .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;
 }
}

/* Прогресс-этапы (клиент) */
.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%, #047857 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.16);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.35);
 backdrop-filter: blur(3px);
}
.hero .pill::before {
 background: #ffd9a0;
}
.hero .apt-meta {
 margin: 16px 0 0;
 gap: 8px;
}
.hero .chip {
 background: rgba(255, 255, 255, 0.12);
 border: 1px solid rgba(255, 255, 255, 0.3);
 color: #fff;
 backdrop-filter: blur(3px);
}
.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: 999px;
 padding: 6px 13px;
 font-size: 13px;
 font-weight: 600;
}
.chip-k {
 display: block;
 font-size: 10px;
 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: 14px;
 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;
}
.zi {
 flex: none;
 width: 32px;
 height: 32px;
 border-radius: 10px;
 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: 10.5px;
 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: 8px;
 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: #b45309;
}
.z-est {
 --zc: #a16207;
}
.z-mat {
 --zc: #64748b;
}
/* Чат в карточке квартиры — сразу под шапкой (пишет прораб/менеджер без прокрутки) */
.z-chat-top {
 max-height: 46vh;
 display: flex;
 flex-direction: column;
}
.z-chat-top .chat {
 flex: 1 1 auto;
 min-height: 120px;
 max-height: 30vh;
}
.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: 14px;
 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, #b45309);
 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;
}

/* Вспышка зоны чата при новом сообщении (клиент) */
.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: 10px;
 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;
}

/* Подпись студии-разработчика.
   ⚙️ СКРЫТА (решение владелицы, 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: 11px;
 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: 10px;
 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: 767px) {
 .studio-credit {
  padding: 14px 12px 90px;
 } /* место под нижней навигацией в приложении */
 .view-login .studio-credit {
  padding: 4px 12px 8px;
 }
}
@media (max-width: 520px) {
 .studio-credit {
  font-size: 10px;
 }
}
@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: 8px;
 max-height: 340px;
 overflow: auto;
 padding: 4px 2px;
 margin: 8px 0;
}
.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: 6px;
 padding: 1px 7px;
 font-size: 11px;
 font-weight: 700;
}
.tag-target-me {
 background: var(--accent);
 color: #fff;
}
.chat-meta {
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 2px;
}
.chat-who {
 font-weight: 700;
 font-size: 13px;
}
.chat-time {
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--muted);
 margin-left: auto;
}
.chat-text {
 font-size: 15px;
 white-space: pre-wrap;
}
.chat-img {
 max-width: 220px;
 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;
}
.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;
}
.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: 999px;
 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: 6px;
 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: #7e9a8d;
 --line: #d9e8de;
 --line-soft: #e7f1ea;
 --accent: #047857; /* насыщенный изумруд */
 --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%, #047857 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%, #059669 55%, #047857 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 #035e46,
  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 #035e46,
  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 #035e46;
}
.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: all 0.15s;
}
.btn-ghost:hover {
 border-color: var(--accent-bright);
 color: var(--accent-ink);
 transform: translateY(-1px);
}

/* Подъём карточек и плавное появление */
.panel,
.kpi,
.apt-row,
.login-card,
.client-card,
.side-item.active {
 animation: fadeUp 0.35s 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);
}
@media (prefers-reduced-motion: reduce) {
 .panel,
 .kpi,
 .apt-row {
  animation: none;
  transition: none;
 }
}
@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: 12px;
 padding: 9px 10px;
 position: relative;
 transition: all 0.18s 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: 10px;
 color: var(--muted);
 box-shadow:
  inset 0 1px 0 #fff,
  0 1px 2px rgba(15, 80, 60, 0.07);
 transition: all 0.2s 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, #0fb981 0%, #059669 55%, #047857 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: 10px;
}

/* Нижняя навигация (мобайл) */
.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: all 0.18s;
}
.bottom-item.active {
 color: #fff;
}
.bottom-item.active .bi {
 background: linear-gradient(135deg, #0fb981, #047857);
 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 3.6s ease-in-out infinite;
 pointer-events: none;
}
@keyframes sheen {
 0% {
  left: -60%;
 }
 55% {
  left: 130%;
 }
 100% {
  left: 130%;
 }
}

/* Плавные переходы между разделами */
.content > * {
 animation: fadeUp 0.28s ease both;
}

/* ============ Расписание (карточки записи + форма) ============ */
.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: 14px;
 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);
 border-radius: 10px;
 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: 10px;
 font-weight: 700;
 color: var(--muted);
 cursor: pointer;
 transition: all 0.15s;
 font-size: 14px;
}
.day-chip:hover {
 border-color: var(--accent-bright);
}
.day-chip.on {
 background: linear-gradient(135deg, #0fb981, #047857);
 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);
}
.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: 12px;
 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, #0fb981, #047857);
 color: #fff;
 border-color: transparent;
}
.book-day {
 min-width: 64px;
 padding: 7px 8px;
 border: 1px solid var(--line);
 background: var(--surface);
 border-radius: 10px;
 font-weight: 700;
 font-size: 13px;
 cursor: pointer;
 text-align: center;
 line-height: 1.25;
 transition: all 0.15s;
}
.book-day:hover {
 border-color: var(--accent-bright);
}
.book-day.active {
 background: linear-gradient(135deg, #0fb981, #047857);
 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: 10px;
 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, #0fb981, #047857);
 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: 8px;
 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: 14px;
 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: 11.5px;
 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-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: #b45309;
}
.meet-group-title.mt-handover {
 color: #0e7490;
}
.meet-group-title.mt-materials {
 color: #6d28d9;
}
.meet-tabs {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin: 6px 0 2px;
}
.mtab {
 padding: 6px 12px;
 border-radius: 999px;
 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, #0fb981, #047857);
 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;
}
.guide-step {
 background: var(--surface-2);
 border: 1px solid var(--line-soft);
 border-radius: 999px;
 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: 10px;
 padding: 10px 12px;
 margin: 6px 0;
}
.ok-note {
 background: var(--ok-bg);
 color: var(--accent-ink);
 border: 1px solid #b5dcc9;
 border-radius: 10px;
 padding: 10px 12px;
 font-weight: 600;
 margin-bottom: 8px;
}
.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: 999px;
 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: 11px;
 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: 10px;
 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: 767px) {
 .link-row {
  grid-template-columns: 56px 1fr;
  gap: 4px 12px;
 }
 .link-row .link-acts {
  grid-column: 1 / -1;
 }
}

/* ============ Карточка квартиры (сотрудник): зоны-блоки ============ */
/* Доп. цвета зон */
.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.12);
 border: 1px solid rgba(255, 255, 255, 0.25);
 border-radius: 10px;
 padding: 8px 12px;
 font-size: 13px;
 color: #fff;
 backdrop-filter: blur(3px);
}
.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;
 justify-content: center;
 padding-top: 14px;
 border-top: 1px dashed var(--line-soft);
}
@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: 12px;
 padding: 12px 14px;
 min-width: 120px;
}
.contract-label {
 font-size: 10.5px;
 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: #b45309;
}
.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: 12px;
 padding: 12px 16px;
}
.finance-tile.highlight {
 background: #fbefe1;
 border-color: #efd9ac;
}
.t-label {
 font-size: 11px;
 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: 11px;
 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: 1023px) {
 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: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
 }
 .card-back .back-ic {
  display: inline;
 }

 /* 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: 12px;
 }
 .zone-head {
  margin-bottom: 8px;
 }
 .hero {
  border-radius: 14px;
  padding: 16px 14px 14px;
 }
 .card-cols2,
 .card-stack {
  gap: 10px;
  margin-bottom: 10px;
 }
 .meet-card {
  padding: 12px 12px;
 }
}

/* Скидки/вычеты в смете — показываем отдельным цветом */
.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: 11px;
 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: 12px;
 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;
}
.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: 10px;
 padding: 8px 12px;
 margin: 6px 0;
 line-height: 1.45;
}