:root {
  --bg: #f8f7f4;
  --surface: #ffffff;
  --surface-soft: #fbfaf7;
  --choco: #302020;
  --choco-soft: #54453f;
  --ink: #241c19;
  --muted: #7b706a;
  --line: #e7e1d8;
  --blue: #0fa7b2;
  --green: #0f6f73;
  --amber: #c7a45a;
  --rose: #b86b58;
  --teal: #5b4a43;
  --sea-deep: #083f46;
  --metal-dark: #062f35;
  --metal-mid: #0a7079;
  --metal-glow: #2bc2c7;
  --metal-edge: #e5c465;
  --gold-dark: #9f7a2b;
  --gold-deep: #8f6800;
  --gold-mid: #e5c465;
  --gold-glow: #fff1ad;
  --teal-pale: #e0f4f2;
  --sand: #e5c465;
  --sand-soft: #fbf3df;
  --shadow: 0 18px 55px rgba(8, 63, 70, 0.08);
}

/* Подключение push показывается всем сотрудникам прямо в рабочем
   интерфейсе: раздел системных настроек менеджерам недоступен. */
.push-setup-banner {
  margin: 10px 20px 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #9bcfca;
  border-left: 4px solid var(--teal, #147d7a);
  background: #eef9f7;
  border-radius: 8px;
}
.push-setup-banner > div { min-width: 0; }
.push-setup-banner strong,
.push-setup-banner span { display: block; }
.push-setup-banner span { margin-top: 3px; color: var(--muted, #6f6863); }
.push-setup-banner.amber { border-color: #e7cf91; background: #fff9e9; }
.push-setup-banner.rose { border-color: #e8aaa4; background: #fff1ef; }
@media (max-width: 720px) {
  .push-setup-banner { margin: 8px 10px 0; align-items: stretch; flex-direction: column; }
  .push-setup-banner .primary-btn { width: 100%; }
}

.payroll-report-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #fff;
}
.payroll-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.payroll-report-head h4 { margin: 2px 0 0; font-size: var(--ш-15); }
.payroll-report-card .report-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  margin-top: 12px;
}
.payroll-report-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.payroll-report-notes article {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}
.payroll-report-notes span {
  color: var(--muted);
  font-size: var(--ш-10);
  text-transform: uppercase;
}
.payroll-report-notes p {
  margin: 5px 0 0;
  font-size: var(--ш-12-5);
  white-space: pre-wrap;
}
.report-reflection { white-space: pre-wrap; }
.employment-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: var(--ш-10);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}
.employment-badge.contract { color: var(--green); background: var(--teal-pale); }
.cost-line.deduction strong { color: var(--rose); }
.payroll-inline {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  color: var(--ink); font-weight: 700;
}
.payroll-inline input {
  width: 108px; min-width: 0; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
  color: var(--ink); font: inherit; font-weight: 700; text-align: right;
}
.payroll-inline input:focus { border-color: var(--teal); outline: 2px solid rgba(22, 119, 124, 0.12); }
.cost-line.deduction .payroll-inline { color: var(--rose); }
.cost-line.deduction .payroll-inline::before { content: "−"; color: var(--rose); }
.report-critical {
  display: grid; gap: 4px; margin: 10px 0; padding: 10px 12px;
  border: 1px solid #d68b7a; border-left: 4px solid #b84432; border-radius: 6px;
  background: #fff1ee; color: #8d281b;
}
.report-critical strong { font-size: var(--ш-13); }
.report-critical span { font-size: var(--ш-11-5); line-height: 1.45; }
.sos-entry { display: grid; gap: 10px; }
.sos-entry-lead {
  margin: 0; padding: 12px 14px; border-left: 4px solid #b84432;
  background: #fff1ee; color: #7d241a; font-size: var(--ш-13); font-weight: 700;
}
.sos-entry-row {
  padding: 11px 13px; border: 1px solid #d68b7a; border-radius: 6px; background: #fff8f6;
}
.sos-entry-row strong { display: block; color: #a03425; font-size: var(--ш-13-5); }
.sos-entry-row p { margin: 5px 0 0; color: var(--ink); font-size: var(--ш-12-5); line-height: 1.45; }

@media (max-width: 720px) {
  .payroll-report-card .report-figs,
  .payroll-report-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   РАЗМЕРЫ ТЕКСТА: ОДНА ШКАЛА НА ВСЮ СИСТЕМУ

   В системе накопилось 29 разных размеров шрифта на 1066 мест,
   причём 84 из каждых 100 укладываются в три пикселя: 10,5 · 11 ·
   11,5 · 12 · 12,5 · 13 · 13,5. На глаз 11 и 11,5 неразличимы,
   разницы в смысле между ними нет — а неопрятность от них есть.

   Поэтому каждый размер теперь переменная. По умолчанию все они
   равны прежним значениям: для всех, кто уже работает, не меняется
   ни один пиксель. «Крупная» шкала сводит их к семи ступеням и
   поднимает основной текст с 13 до 14 — её включает себе тот, кто
   хочет, в своей карточке.

   Когда шкалу примут все, «крупную» сделаем значением по умолчанию,
   остальные уберём, а имена переменных перепишем по смыслу —
   сейчас они названы по прежним пикселям, чтобы замена была
   механической и её можно было проверить построчно.
   ============================================================ */
:root {
  --ш-8-5: 8.5px;
  --ш-9: 9px;
  --ш-9-5: 9.5px;
  --ш-10: 10px;
  --ш-10-5: 10.5px;
  --ш-11: 11px;
  --ш-11-5: 11.5px;
  --ш-12: 12px;
  --ш-12-5: 12.5px;
  --ш-13: 13px;
  --ш-13-5: 13.5px;
  --ш-14: 14px;
  --ш-14-5: 14.5px;
  --ш-15: 15px;
  --ш-15-5: 15.5px;
  --ш-16: 16px;
  --ш-17: 17px;
  --ш-18: 18px;
  --ш-19: 19px;
  --ш-20: 20px;
  --ш-21: 21px;
  --ш-22: 22px;
  --ш-23: 23px;
  --ш-24: 24px;
  --ш-26: 26px;
  --ш-27: 27px;
  --ш-28: 28px;
  --ш-30: 30px;
  --ш-38: 38px;
  --строка: 1.34;
}

/* Крупная шкала: семь ступеней вместо двадцати девяти.
   11 · 12 · 14 · 16 · 20 · 26 · 34 */
:root[data-шкала="крупная"] {
  --ш-8-5: 11px;
  --ш-9: 11px;
  --ш-9-5: 11px;
  --ш-10: 12px;
  --ш-10-5: 12px;
  --ш-11: 12px;
  --ш-11-5: 12px;
  --ш-12: 14px;
  --ш-12-5: 14px;
  --ш-13: 14px;
  --ш-13-5: 14px;
  --ш-14: 16px;
  --ш-14-5: 16px;
  --ш-15: 16px;
  --ш-15-5: 16px;
  --ш-16: 16px;
  --ш-17: 20px;
  --ш-18: 20px;
  --ш-19: 20px;
  --ш-20: 20px;
  --ш-21: 20px;
  --ш-22: 26px;
  --ш-23: 26px;
  --ш-24: 26px;
  --ш-26: 26px;
  --ш-27: 26px;
  --ш-28: 26px;
  --ш-30: 34px;
  --ш-38: 34px;
  --строка: 1.45;
}

/* Кружки и квадратики со знаком внутри: буква выросла, значит и
   оправа должна вырасти, иначе знак упрётся в края. Их всего три
   на всю систему — правим поимённо, а не общим правилом. */
:root[data-шкала="крупная"] .field-cell > span em { width: 16px; height: 16px; }
:root[data-шкала="крупная"] .commission-warn { width: 18px; height: 18px; }
:root[data-шкала="крупная"] .check-mark { width: 21px; height: 21px; line-height: 21px; }

/* Плотная: те же семь ступеней, что и крупная, но на ступень
   мельче — 10 · 11 · 13 · 15 · 18 · 22 · 28. Разнобоя здесь тоже
   нет: это та же наведённая шкала, просто для тех, кому важнее
   число строк на экране, чем кегль. */
:root[data-шкала="компактная"] {
  --ш-8-5: 10px;
  --ш-9: 10px;
  --ш-9-5: 10px;
  --ш-10: 11px;
  --ш-10-5: 11px;
  --ш-11: 11px;
  --ш-11-5: 11px;
  --ш-12: 13px;
  --ш-12-5: 13px;
  --ш-13: 13px;
  --ш-13-5: 13px;
  --ш-14: 15px;
  --ш-14-5: 15px;
  --ш-15: 15px;
  --ш-15-5: 15px;
  --ш-16: 15px;
  --ш-17: 18px;
  --ш-18: 18px;
  --ш-19: 18px;
  --ш-20: 18px;
  --ш-21: 18px;
  --ш-22: 22px;
  --ш-23: 22px;
  --ш-24: 22px;
  --ш-26: 22px;
  --ш-27: 22px;
  --ш-28: 22px;
  --ш-30: 28px;
  --ш-38: 28px;
  --строка: 1.3;
}


* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--ш-13);
  line-height: var(--строка);
  letter-spacing: 0;
}

strong {
  font-weight: 600;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
}

.sidebar {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  background: url("./assets/heart_gold.png") center / contain no-repeat;
  pointer-events: none;
}

.sidebar::before {
  width: 210px;
  height: 150px;
  left: -76px;
  bottom: 72px;
  opacity: 0.07;
  transform: rotate(-8deg);
}

.sidebar::after {
  width: 118px;
  height: 84px;
  right: -42px;
  top: 64px;
  opacity: 0.05;
  transform: rotate(10deg);
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
  border: 1px solid var(--gold-mid);
  color: var(--ink);
  font-weight: 700;
}

.brand-mark img,
.preview-mark img {
  width: 30px;
  height: 24px;
  object-fit: contain;
}

.brand strong,
.brand span {
  display: block;
}

.brand-name {
  color: var(--ink);
}

.brand-name span {
  display: inline;
  margin: 0;
  background: linear-gradient(110deg, var(--gold-dark), var(--gold-mid), var(--gold-glow), var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand span,
.label,
.eyebrow,
small {
  color: var(--muted);
  font-size: var(--ш-11);
}

.brand span {
  color: var(--muted);
  margin-top: 2px;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #685b54;
  min-height: 38px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 8px 10px;
  font-size: var(--ш-13);
}

/* Полоса «почему этот раздел подсвечен». Ровно те же слова,
   которыми считалась цифра у пункта меню. */
.почему-горит {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 12px; padding: 9px 14px;
  border-radius: 10px;
  background: rgba(199, 164, 90, 0.12);
  border-left: 3px solid var(--amber);
}
/* Причина — кнопка: жмут и попадают в тот же список, из которого
   её посчитали. Выглядит как текст, ведёт себя как ссылка. */
.почему-пункт {
  font-size: var(--ш-12-5); color: var(--ink); background: none; border: 0;
  padding: 0; font: inherit; font-size: var(--ш-12-5); cursor: pointer;
  text-align: left; text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.18);
  text-underline-offset: 3px;
}
.почему-пункт:hover { text-decoration-color: currentColor; }
.почему-пункт:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.почему-пункт.горит { font-weight: 600; }
.почему-пункт + .почему-пункт::before {
  content: "·"; color: var(--muted); margin-right: 10px;
}
.почему-горит:has(.почему-пункт.горит) {
  background: rgba(184, 107, 88, 0.09); border-left-color: var(--rose);
}

/* ---------- Раздел, куда стоит заглянуть ----------

   Цифра справа от названия: сколько дел ждёт. Спокойная — дела
   дня, красная — просрочено. Название слегка темнеет: глаз
   цепляется за строку целиком, а не только за значок.

   Третья колонка появляется только тогда, когда есть что
   показать, — иначе пункты меню разъезжались бы вхолостую. */
.nav-item.ждёт { grid-template-columns: 22px 1fr auto; color: var(--ink); font-weight: 500; }
.nav-count {
  min-width: 19px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: var(--ш-11); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Просто «есть новое» — янтарным: заметно, но не тревожно. */
  background: rgba(199, 164, 90, 0.2); color: #7a6320;
}
/* Просрочено — красным. Этот цвет в меню означает ровно одно:
   срок прошёл. Больше он ни для чего не занят. */
.nav-item.горит .nav-count {
  background: var(--rose); color: #fff;
  box-shadow: 0 1px 4px rgba(184, 107, 88, 0.4);
}
.nav-item.active .nav-count { background: rgba(255, 255, 255, 0.24); color: #fff; }
.nav-item.active.горит .nav-count { background: #fff; color: var(--rose); box-shadow: none; }
/* На свёрнутом меню подписи нет — значок ставим уголком на иконку */
.sidebar.collapsed .nav-item.ждёт { grid-template-columns: 22px; }
.sidebar.collapsed .nav-count {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px; font-size: var(--ш-9-5);
}
.sidebar.collapsed .nav-item { position: relative; }

.nav-item svg,
.top-actions svg,
.search svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.nav-item:hover,
.nav-item.active {
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 43%, var(--metal-glow) 50%, var(--metal-mid) 57%, var(--metal-dark) 100%);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(57, 38, 38, 0.16);
}

.team-card {
  margin-top: auto;
  background: var(--sand-soft);
  border: 1px solid rgba(214, 173, 78, 0.42);
  border-radius: 8px;
  padding: 14px;
}

.team-card strong {
  display: block;
  margin: 4px 0 12px;
}

.team-stack {
  display: flex;
}

.team-stack span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--sand-soft);
  font-size: var(--ш-12);
  font-weight: 700;
  margin-left: -7px;
}

.team-stack span:first-child {
  margin-left: 0;
}

.main {
  position: relative;
  min-width: 0;
  padding: 26px 30px;
}

.main::before {
  content: "";
  position: fixed;
  width: min(440px, 52vw);
  height: min(320px, 38vw);
  left: calc(50% - 120px);
  top: 34vh;
  background: url("./assets/heart_gold.png") center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
  /* Знак — фон, а не наклейка поверх строк. Отрицательный слой
     кладёт его под всё содержимое раз и навсегда: раньше он стоял
     нулевым и держался ниже только потому, что прямым детям .main
     проставлен первый слой. Стоило появиться блоку с собственным
     слоем — и золотое сердце всплывало поверх полей ввода. */
  z-index: -1;
}

.main > * {
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 4px;
  font-size: var(--ш-20);
  line-height: 1.18;
  font-weight: 600;
}

h2 {
  font-size: var(--ш-14);
  line-height: 1.25;
  font-weight: 600;
}

h3 {
  font-size: var(--ш-13);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search {
  min-width: 310px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e4e8e8;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  padding: 0 12px;
}

.search.small {
  min-width: 250px;
}

.search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: var(--ink);
}

.icon-btn,
.primary-btn,
.secondary-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 38px;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.icon-btn {
  width: 38px;
}

.primary-btn {
  border-color: var(--sea-deep);
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 44%, var(--metal-glow) 50%, var(--metal-mid) 57%, var(--metal-dark) 100%);
  color: #ffffff;
  padding: 0 14px;
  box-shadow: 0 14px 28px rgba(57, 38, 38, 0.16);
}

.secondary-btn {
  padding: 0 12px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

#workspace.active {
  display: flex;
  flex-direction: column;
}

#workspace .workspace-grid {
  order: 2;
}

#workspace .metrics-grid {
  order: 1;
  margin-bottom: 16px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.metric-card,
.panel,
.deal-card,
.lane,
.knowledge-card,
.deal-mini {
  background: var(--surface);
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric-card {
  min-height: 92px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background:
    linear-gradient(180deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
}

.metric-card span,
.metric-card small {
  display: block;
}

.metric-card strong {
  display: block;
  margin: 7px 0 5px;
  font-size: var(--ш-20);
  line-height: 1.08;
  font-weight: 600;
}

.accent-blue {
  --accent: var(--blue);
}

.accent-green {
  --accent: var(--green);
}

.accent-amber {
  --accent: var(--amber);
}

.accent-amber {
  border-color: rgba(229, 196, 101, 0.62);
  background: #ffffff;
}

.accent-rose {
  --accent: var(--rose);
}

.accent-plan {
  --accent: var(--gold-mid);
  border-color: rgba(229, 196, 101, 0.62);
}

.workspace-grid,
.finance-layout,
.service-layout,
.knowledge-layout,
.tasks-layout,
.bookings-layout,
.palette-layout,
.brand-demo-layout,
.reports-layout,
.chat-layout,
.module-layout,
.booking-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
  gap: 16px;
}

.palette-current {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  background: var(--sand-soft);
  color: var(--sea-deep);
  border: 1px solid rgba(18, 63, 71, 0.1);
  padding: 6px 12px;
  font-size: var(--ш-13);
  font-weight: 800;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.product-dna {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.product-dna article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.product-dna strong {
  display: block;
  color: var(--sea-deep);
  font-size: var(--ш-18);
  line-height: 1;
  margin-bottom: 8px;
}

.product-dna span {
  color: var(--muted);
  font-size: var(--ш-12);
  line-height: 1.35;
}

.palette-card {
  border: 1px solid rgba(18, 63, 71, 0.1);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  text-align: left;
  box-shadow: 0 12px 34px rgba(22, 63, 71, 0.06);
}

.palette-card:hover,
.palette-card.active {
  border-color: var(--blue);
  box-shadow: 0 18px 42px rgba(22, 63, 71, 0.12);
}

.palette-card.active {
  outline: 2px solid rgba(199, 164, 90, 0.32);
}

.palette-card strong,
.palette-card span {
  display: block;
}

.palette-card strong {
  margin-top: 12px;
  font-size: var(--ш-17);
}

.palette-card span {
  color: var(--muted);
  font-size: var(--ш-13);
  margin-top: 4px;
}

.swatch-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.swatch {
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(18, 63, 71, 0.1);
}

.swatch:last-child {
  background:
    linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%) !important;
}

.palette-preview {
  align-self: start;
}

.preview-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 49%, var(--metal-mid) 58%, var(--metal-dark) 100%);
  color: #ffffff;
  border: 1px solid rgba(214, 173, 78, 0.42);
}

.preview-brand span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--ш-12);
  margin-top: 3px;
}

.preview-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
  color: var(--ink);
  font-weight: 900;
}

.preview-action {
  width: 100%;
  margin: 12px 0;
}

.preview-booking {
  box-shadow: none;
}

.brand-demo-hero {
  position: relative;
  overflow: hidden;
}

.brand-demo-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background:
    linear-gradient(180deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
}

.brand-demo-top {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.client-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
  color: #ffffff;
  font-weight: 900;
  border: 1px solid rgba(231, 199, 106, 0.5);
}

.brand-demo-top p {
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.45;
}

.brand-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.brand-demo-grid article {
  border: 1px solid rgba(231, 199, 106, 0.28);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.brand-demo-grid span,
.brand-demo-grid small {
  display: block;
  color: var(--muted);
}

.brand-demo-grid strong {
  display: block;
  font-size: var(--ш-24);
  margin: 8px 0;
}

.brand-apply {
  width: 100%;
}

.brand-feature-list {
  display: grid;
  gap: 12px;
}

.brand-feature-list p {
  border: 1px solid rgba(231, 199, 106, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.brand-feature-list strong {
  color: var(--ink);
}

.panel {
  padding: 14px;
  min-width: 0;
}

.wide {
  grid-column: span 1;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-head.compact {
  align-items: flex-start;
}

.segmented {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f8;
}

.segmented button {
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--muted);
}

.segmented button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(18, 63, 71, 0.08);
}

.pipeline-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.process-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.process-strip article {
  position: relative;
  min-width: 0;
  padding-left: 38px;
}

.process-strip span {
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--teal-pale, #e0f4f2);
  color: var(--teal);
  font-size: var(--ш-12);
  font-weight: 700;
}

.process-strip strong {
  display: block;
  margin-bottom: 4px;
}

.process-strip p {
  color: var(--muted);
  font-size: var(--ш-12);
  line-height: 1.35;
}

.request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

.request-list {
  overflow-x: auto;
}

.request-table {
  min-width: 1080px;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.request-row {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 0.8fr 1.05fr 0.8fr 0.95fr 0.8fr 0.85fr 1.4fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  font-size: var(--ш-13);
}

.request-row:not(.request-head):not(.request-total) {
  cursor: pointer;
}

.request-row:not(.request-head):not(.request-total):hover {
  background: var(--surface-soft);
}

.request-row span,
.request-row small,
.request-row em {
  min-width: 0;
  display: block;
}

.request-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--ш-11);
}

.request-row em {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(15, 143, 133, 0.24);
  border-radius: 8px;
  background: #f2fbf9;
  color: var(--teal);
  padding: 3px 7px;
  font-style: normal;
  font-size: var(--ш-12);
}

.request-head {
  min-height: 36px;
  background: var(--teal-pale, #e0f4f2);
  color: var(--muted);
  font-size: var(--ш-11);
  font-weight: 600;
  cursor: default;
}

.request-total {
  border-bottom: 0;
  background: linear-gradient(180deg, #ffffff, #fffdf8);
  color: var(--teal);
  font-weight: 600;
}

.request-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

.request-main,
.request-side {
  display: grid;
  gap: 12px;
}

.request-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(15, 143, 133, 0.32);
}

.request-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--metal-dark), var(--metal-glow), var(--gold-glow), var(--gold-mid), var(--metal-dark));
}

.request-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
  border: 1px solid rgba(15, 143, 133, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.request-facts article {
  position: relative;
  min-height: 78px;
  padding: 11px;
}

.request-facts article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(229, 196, 101, 0.55), rgba(15, 143, 133, 0.32), transparent);
}

.request-facts span,
.request-facts small {
  display: block;
  color: var(--muted);
  font-size: var(--ш-11);
}

.request-facts strong {
  display: block;
  margin: 5px 0 3px;
  font-size: var(--ш-14);
  font-weight: 600;
  line-height: 1.2;
}

.request-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.request-sections .panel:nth-child(n + 3) {
  grid-column: 1 / -1;
}

.request-sections .booking-info-list {
  grid-template-columns: 1fr;
}

.request-sections .booking-info-list div {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
}

.request-note,
.comment-box {
  color: var(--ink);
  line-height: 1.45;
}

.comment-box {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
}

.timeline.separated {
  gap: 12px;
}

.change-log {
  display: grid;
  gap: 8px;
}

.change-log article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.change-log span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-11);
  margin-bottom: 4px;
}

.change-log p {
  margin-top: 3px;
  color: var(--muted);
}

.stage {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 84px;
  background: #ffffff;
}

.stage strong {
  display: block;
  margin: 6px 0;
  font-size: var(--ш-18);
}

.stage-bar {
  height: 6px;
  border-radius: 99px;
  background: #e5ebf0;
  overflow: hidden;
}

.stage-bar span {
  display: block;
  height: 100%;
  background: var(--stage-color);
}

.ai-list,
.flight-list,
.payment-calendar,
.cash-summary,
.chat-list,
.handoff,
.automation-list,
.role-flow,
.helper-grid,
.review-board,
.permission-list,
.settings-grid {
  display: grid;
  gap: 12px;
}

.task-feed {
  display: grid;
  gap: 10px;
}

.task-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.task-column {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 12px;
}

.task-column h3 {
  margin-bottom: 10px;
}

.task-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(229, 196, 101, 0.2);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(22, 63, 71, 0.05);
}

.task-column .task-item {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.task-item time {
  color: var(--teal);
  font-weight: 600;
}

.task-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-item p {
  margin-top: 5px;
  color: var(--ink);
}

.task-item small {
  display: block;
  margin-top: 5px;
}

.task-type {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 4px 9px;
  background: #eef8f8;
  color: var(--green);
  font-size: var(--ш-11);
  font-weight: 600;
  white-space: nowrap;
}

.ai-list article,
.flight-item,
.payment-item,
.cash-summary div,
.chat-list p,
.handoff p,
.automation-list article,
.role-flow article,
.helper-grid article,
.review-board article,
.settings-grid article {
  border: 1px solid rgba(229, 196, 101, 0.2);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.ai-list p,
.flight-item p,
.deal-mini p,
.knowledge-card p,
.handoff p,
.chat-list p,
.automation-list p,
.booking-card p,
.role-flow p,
.helper-grid p,
.review-board p,
.permission-list p,
.settings-grid p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.rop-panel {
  grid-column: 1 / -1;
}

.role-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-flow.vertical {
  grid-template-columns: 1fr;
}

.role-flow article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px 10px;
}

.role-flow article span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(110deg, var(--gold-dark), var(--gold-mid), var(--gold-glow), var(--gold-mid));
  color: var(--ink);
  font-size: var(--ш-12);
  font-weight: 700;
}

.role-flow article p {
  grid-column: 2;
}

.helper-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.helper-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: var(--ш-12);
}

.helper-switch button.active {
  background: #ffffff;
  color: var(--teal);
  box-shadow: 0 1px 5px rgba(8, 63, 70, 0.08);
}

.compact-ai {
  gap: 8px;
}

.compact-ai article {
  padding: 10px;
}

.helper-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.helper-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.helper-grid span,
.review-board span {
  color: var(--teal);
  font-size: var(--ш-12);
  font-weight: 600;
}

.review-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.permission-list p {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.permission-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 5;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-deep, var(--gold-dark));
  border-radius: 14px;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 43%, var(--metal-glow) 50%, var(--metal-mid) 57%, var(--metal-dark) 100%);
  box-shadow: 0 8px 18px rgba(8, 63, 70, 0.18);
}

.ai-float img {
  width: 34px;
  height: 26px;
  object-fit: contain;
}

.ai-float span {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9534a;
  border: 1px solid #ffffff;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 99px;
  padding: 4px 8px;
  font-size: var(--ш-12);
  background: #f2f5f5;
  color: #304050;
}

.pill.green {
  background: #e4f4f1;
  color: #136b56;
}

.pill.amber {
  background: #fbf0d8;
  color: #8d5c08;
}

.pill.rose {
  background: #fae9e5;
  color: #a83045;
}

.pill.blue {
  background: #e8f5f7;
  color: #1b6f7b;
}

/* ---------- Цвета этапов договора ----------

   Статусов четырнадцать, а цветов было четыре: «Подтверждена»,
   «Принята в КС» и «Документы выданы» сливались в один зелёный.
   Здесь у каждого этапа свой оттенок, различимый краем глаза. */
.pill.violet {
  background: #efe6fb;
  color: #5a2fa6;
}

.pill.indigo {
  background: #e3e9fd;
  color: #26399b;
}

.pill.plum {
  background: #fbe6f2;
  color: #9b2d6f;
}

.pill.slate {
  background: #eceff2;
  color: #46566a;
}

/* Последний этап — «Документы выданы». Заливали его целиком
   тёмно-зелёным: цвет читался, а текст на нём — нет. Светлая
   оливковая плашка с тёмными буквами и отличается от мятной
   «Подтверждена», и остаётся читаемой. */
.pill.done {
  background: #e7f0d6;
  color: #4c6a15;
}

/* В списке броней столбец узкий: длинный статус обрезаем
   многоточием, а целиком он показывается при наведении. */
.статус-договора .pill {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  align-items: start;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.lane {
  min-width: 230px;
  padding: 12px;
  box-shadow: none;
}

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

.lane-count {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--ш-12);
  font-weight: 700;
}

.lane-cards {
  display: grid;
  gap: 10px;
}

.deal-mini {
  padding: 12px;
  text-align: left;
  border: 1px solid var(--line);
  width: 100%;
}

.deal-mini.active {
  outline: 2px solid var(--blue);
}

.deal-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--ш-12);
}

.deal-card {
  padding: 18px;
  position: sticky;
  top: 18px;
}

.detail-hero {
  min-height: 138px;
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 49%, var(--metal-mid) 58%, var(--metal-dark) 100%);
  border: 1px solid rgba(214, 173, 78, 0.42);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-grid div {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
}

.detail-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
  margin-bottom: 4px;
}

.timeline {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--teal);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

th,
td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: var(--ш-11);
  font-weight: 600;
}

td {
  font-size: var(--ш-13);
}

.cash-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cash-summary span {
  color: var(--muted);
}

.service-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.service-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 12px;
}

.service-column h3 {
  margin-bottom: 10px;
}

.service-ticket {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}

.service-ticket p {
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}

.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.booking-criteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.booking-criteria label {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
}

.booking-criteria span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
  margin-bottom: 5px;
}

.booking-criteria select,
.booking-criteria input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.booking-search-field {
  border-color: rgba(15, 143, 133, 0.28) !important;
}

.booking-list-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.booking-list-summary article {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.booking-list-summary article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background:
    linear-gradient(180deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
}

.booking-list-summary span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
}

.booking-list-summary strong {
  display: block;
  margin-top: 6px;
  font-size: var(--ш-20);
}

.booking-list {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.booking-table {
  /* Было 1660 — таблица всегда уезжала вбок. Теперь тянется по месту,
     а на узких экранах прокручивается только если совсем не влезло. */
  min-width: 1080px;
  display: grid;
  gap: 6px;
}

.inline-registry {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.compact-flow {
  gap: 8px;
  margin-top: 12px;
}

.compact-flow article {
  padding: 9px;
}

.compact-flow article p {
  margin-top: 2px;
  font-size: var(--ш-12);
}

.booking-table {
  --доп-столбцы: ;
}

.booking-table .booking-row {
  width: 100%;
  appearance: none;
  display: grid;
  /* Ширина под содержимое, а не поровну: дате хватает узкой колонки,
     а заказчику и стране нужно место. Всё в одну строку — иначе
     строки разной высоты и таблицу невозможно читать.
     Порядок: договор · дата · страна · вылет · заказчик · менеджер ·
     статус · бронь ТО · сумма · оплачено · партнёрам · комиссия · метки */
  /* Пустоты убраны: узким столбцам — ровно сколько нужно, а место
     отдано тем, где текст: страна, заказчик, менеджер, туроператор. */
  /* В конце — столбцы, которые человек добавил себе сам кнопкой
     «Добавить столбцы». Пока не добавил, переменная пустая, и
     сетка та же, что была. */
  /* Денежные столбцы шире: суммы показываются полностью, до рубля,
     и «124 600 ₽» не должно переноситься на вторую строку. */
  grid-template-columns:
    92px 74px minmax(90px, 1fr) 84px minmax(116px, 1.2fr)
    minmax(92px, 1fr) 104px minmax(100px, 1.1fr)
    104px 108px 104px 96px minmax(60px, 0.6fr)
    var(--доп-столбцы, );
  gap: 7px;
  align-items: stretch;
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.booking-table .booking-row:not(.booking-head):not(.booking-total-row):hover {
  border-color: rgba(229, 196, 101, 0.62);
  box-shadow: 0 12px 30px rgba(8, 63, 70, 0.08);
}

.booking-table .booking-row > span,
.booking-table .booking-row > strong {
  min-width: 0;
  border-right: 1px solid var(--line);
  padding-right: 9px;
}

.booking-table .booking-row > span:last-child,
.booking-table .booking-row > strong:last-child {
  border-right: 0;
}

.booking-table .booking-row span,
.booking-table .booking-row small {
  display: block;
  color: var(--muted);
  font-size: var(--ш-11);
}

.booking-table .booking-row strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: var(--ш-13);
  line-height: 1.2;
  font-weight: 600;
}

.booking-table .booking-head {
  background: var(--surface-soft);
  cursor: default;
  box-shadow: none;
}

.booking-table .booking-head span {
  color: var(--muted);
  font-weight: 600;
}

.booking-table .booking-total-row {
  border-color: rgba(214, 173, 78, 0.48);
  background: linear-gradient(90deg, #ffffff 0%, #fffdf5 100%);
  cursor: default;
}

.booking-table .booking-total-row > span:first-child {
  color: var(--sea-deep);
  font-weight: 700;
}

.booking-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
}

.booking-tags small {
  display: inline-flex !important;
  width: max-content;
  border: 1px solid rgba(214, 173, 78, 0.36);
  border-radius: 7px;
  background: #fffdf5;
  color: var(--ink) !important;
  padding: 3px 6px;
}

.booking-row-main span {
  color: var(--teal);
  font-weight: 600;
}

.booking-card {
  border: 1px solid rgba(229, 196, 101, 0.24);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 14px 36px rgba(22, 63, 71, 0.07);
}

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

.booking-head span {
  color: var(--teal);
  font-size: var(--ш-12);
  font-weight: 800;
}

.booking-sale {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  border: 1px solid rgba(18, 63, 71, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
  border-color: rgba(214, 173, 78, 0.54);
  padding: 12px;
  margin-bottom: 10px;
}

.booking-sale span {
  color: var(--muted);
  font-size: var(--ш-12);
  font-weight: 700;
}

.booking-sale strong {
  color: var(--sea-deep);
  font-size: var(--ш-20);
  line-height: 1;
}

.booking-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.booking-meta div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.booking-meta span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
  margin-bottom: 4px;
}

.booking-detail-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.booking-workspace {
  display: grid;
  grid-template-columns: 210px minmax(560px, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.booking-card-only {
  grid-template-columns: minmax(0, 1fr) 330px;
}

.booking-menu,
.booking-right {
  position: sticky;
  top: 18px;
}

.booking-menu {
  display: grid;
  gap: 7px;
  box-shadow: none;
}

.booking-menu button,
.right-menu button,
.document-list button {
  min-height: 31px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 6px 9px;
  font-size: var(--ш-13);
}

.booking-menu button.active,
.booking-menu button:hover,
.right-menu button:hover,
.document-list button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.menu-gap {
  margin-top: 14px;
}

.booking-center,
.booking-right {
  display: grid;
  gap: 12px;
}

.booking-header-line,
.booking-title-row,
.widget-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.back-link {
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 600;
  padding: 0;
}

.booking-header-actions {
  display: flex;
  gap: 8px;
}

.booking-hero-card {
  border-color: rgba(15, 143, 133, 0.32);
  position: relative;
  overflow: hidden;
}

.booking-hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--metal-dark), var(--metal-glow), var(--gold-glow), var(--gold-mid), var(--metal-dark));
}

.booking-title-row p {
  color: var(--muted);
  margin-top: 6px;
  font-size: var(--ш-12);
  line-height: 1.3;
}

.booking-title-row h2,
.booking-info-panel h2,
.program-panel h2,
.right-menu h2,
.client-card h2,
.side-widget h2 {
  font-size: var(--ш-14);
  font-weight: 600;
}

.booking-title-row h2 span {
  color: var(--muted);
  font-weight: 500;
}

.booking-status-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.sold-badge,
.paid-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: var(--ш-12);
  font-weight: 600;
  line-height: 1.15;
}

.sold-badge {
  background: var(--green);
  color: #ffffff;
}

.paid-badge {
  border: 1px solid rgba(15, 143, 133, 0.32);
  color: var(--green);
  background: #f2fbf9;
}

.booking-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr 1.2fr;
  margin-top: 12px;
  border: 1px solid rgba(15, 143, 133, 0.24);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.booking-finance-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-facts article {
  position: relative;
  min-height: 88px;
  padding: 12px;
}

.booking-facts article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(229, 196, 101, 0.55), var(--gold-glow), rgba(15, 143, 133, 0.38), transparent);
}

.booking-facts span,
.booking-facts small,
.booking-info-list span,
.program-list span,
.client-lines span,
.tourist-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-11);
}

.booking-facts strong {
  display: block;
  margin: 6px 0 4px;
  font-size: var(--ш-15);
  font-weight: 600;
  line-height: 1.18;
}

.booking-facts .total strong {
  color: var(--green);
  font-size: var(--ш-21);
  font-weight: 600;
}

.booking-facts .commission {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 223, 154, 0.18)),
    linear-gradient(90deg, rgba(214, 173, 78, 0.22), rgba(43, 194, 199, 0.1));
}

.booking-facts .commission strong {
  color: var(--sea-deep);
  font-size: var(--ш-20);
}

.booking-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  gap: 18px;
}

.booking-tabs button {
  min-height: 38px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 2px;
}

.booking-tabs button.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 600;
}

.booking-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.booking-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 4px 14px;
}

.booking-info-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(231, 225, 216, 0.72);
}

.booking-info-list strong,
.client-lines strong,
.tourist-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.edit-field {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin-left: 6px;
  border: 1px solid rgba(214, 173, 78, 0.34);
  border-radius: 7px;
  background: #fffdf5;
  color: var(--teal);
  font-size: var(--ш-11);
  line-height: 1;
  vertical-align: middle;
}

.right-menu button,
.document-list button,
.booking-menu button {
  font-weight: 400;
}

.program-list {
  display: grid;
  gap: 10px;
}

.program-list article {
  border: 1px solid rgba(229, 196, 101, 0.2);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.program-list strong {
  display: block;
  margin: 4px 0;
}

.program-list p {
  color: var(--muted);
  line-height: 1.4;
}

.settlement-panel {
  position: relative;
}

.settlement-list {
  display: grid;
  gap: 8px;
}

.settlement-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px 14px;
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.settlement-list span {
  color: var(--muted);
  font-size: var(--ш-11);
}

.settlement-list strong {
  justify-self: end;
  color: var(--sea-deep);
}

.settlement-list p {
  grid-column: 1 / -1;
  color: var(--muted);
}

.settlement-list .debt {
  border-color: rgba(184, 107, 88, 0.28);
  background: #fffafa;
}

.right-menu {
  display: grid;
  gap: 8px;
}

.right-menu .panel-head {
  margin-bottom: 4px;
}

.right-menu button {
  border-left: 2px solid transparent;
}

.right-menu button:hover {
  border-left-color: var(--gold-mid);
}

.client-lines,
.document-list {
  display: grid;
  gap: 9px;
}

.booking-tourist-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.booking-tourist-list button {
  border: 1px solid rgba(229, 196, 101, 0.24);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  padding: 10px;
}

.booking-tourist-list button:hover {
  border-color: rgba(15, 143, 133, 0.38);
  background: var(--surface-soft);
}

.booking-tourist-list strong,
.booking-tourist-list span {
  display: block;
}

.booking-tourist-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--ш-11);
}

.client-lines p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: var(--ш-13);
}

.full {
  width: 100%;
  margin-top: 12px;
}

.tourist-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.tourist-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
}

.tourist-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 900;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
}

.tourist-hero p {
  color: var(--muted);
  margin-top: 8px;
}

.tourist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tourist-grid article,
.tourist-history article {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.tourist-grid strong {
  display: block;
  margin-top: 6px;
}

.tourist-history {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.tourist-history span {
  display: block;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 1450px) {
  .shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .main {
    padding: 22px 20px;
  }

  .booking-workspace {
    grid-template-columns: 165px minmax(0, 1fr) 255px;
    gap: 14px;
  }

  .booking-right {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .booking-facts,
  .booking-info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-info-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.uon-booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.uon-top-panel {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.uon-top-panel > div,
.uon-summary article,
.uon-section,
.uon-fields div,
.uon-service-card div,
.uon-payment-list article {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
}

.uon-top-panel > div {
  padding: 12px;
}

.uon-actions {
  display: grid;
  gap: 8px;
  min-width: 132px;
}

.uon-top-panel span,
.uon-top-panel small,
.uon-summary span,
.uon-fields span,
.uon-service-card span,
.uon-payment-list span,
.uon-payment-list small {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
}

.uon-top-panel strong {
  display: block;
  margin: 6px 0;
}

.uon-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.uon-summary article {
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.uon-summary article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background:
    linear-gradient(180deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
}

.uon-summary strong {
  display: block;
  color: var(--sea-deep);
  font-size: var(--ш-23);
  margin-top: 8px;
}

.uon-section {
  padding: 14px;
  margin-top: 12px;
}

.uon-fields,
.uon-service-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.uon-service-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uon-fields div,
.uon-service-card div {
  padding: 10px;
}

.uon-tourists,
.uon-payment-list {
  display: grid;
  gap: 8px;
}

.uon-tourists article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.uon-tourists article:last-child {
  border-bottom: 0;
}

.uon-tourists span {
  color: var(--muted);
}

.uon-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.uon-payment-list article {
  padding: 10px;
}

.uon-payment-list strong {
  display: block;
  font-size: var(--ш-20);
  margin: 5px 0;
}

.uon-docs {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.uon-docs button {
  border: 1px solid rgba(229, 196, 101, 0.28);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  min-height: 40px;
}

.uon-communication {
  position: sticky;
  top: 18px;
}

.booking-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.booking-detail-head p {
  color: var(--muted);
  margin-top: 8px;
}

.booking-total {
  border: 1px solid rgba(229, 196, 101, 0.54);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.booking-total span,
.booking-total small {
  display: block;
  color: var(--muted);
}

.booking-total strong {
  display: block;
  color: var(--sea-deep);
  font-size: var(--ш-28);
  margin: 8px 0;
}

.booking-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.booking-status-grid article,
.booking-sections article,
.ai-booking-note {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.booking-status-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
  margin-bottom: 6px;
}

.booking-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section-title span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: var(--ш-12);
  font-weight: 900;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
}

.booking-sections p {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 7px;
}

.booking-side-card {
  position: sticky;
  top: 18px;
}

.ai-booking-note {
  margin-top: 14px;
}

.ai-booking-note span {
  display: block;
  color: var(--teal);
  font-weight: 800;
  margin-bottom: 8px;
}

.ai-booking-note p {
  color: var(--muted);
  line-height: 1.45;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.universal-list,
.calendar-grid,
.team-directory {
  display: grid;
  gap: 12px;
}

.universal-list article,
.calendar-grid article,
.team-directory article {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.universal-list strong,
.universal-list span,
.universal-list em,
.team-directory strong,
.team-directory span,
.team-directory small {
  display: block;
}

.universal-list span,
.team-directory span {
  color: var(--muted);
  margin-top: 6px;
}

.universal-list em {
  color: var(--teal);
  font-style: normal;
  margin-top: 8px;
  font-size: var(--ш-13);
}

.calendar-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.calendar-grid article {
  min-height: 132px;
}

.calendar-grid span {
  display: inline-flex;
  color: #ffffff;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
  border-radius: 99px;
  padding: 5px 10px;
  font-size: var(--ш-12);
  margin-bottom: 12px;
}

.calendar-grid p {
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

.team-directory {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.report-card,
.report-row,
.channel-list button,
.message,
.chat-input {
  border: 1px solid rgba(229, 196, 101, 0.22);
  border-radius: 8px;
  background: #ffffff;
}

.report-card {
  padding: 14px;
}

.report-card span,
.report-card small {
  display: block;
  color: var(--muted);
}

.report-card strong {
  display: block;
  font-size: var(--ш-19);
  margin: 6px 0 10px;
  font-weight: 600;
}

.plan-bar {
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-soft);
  margin-bottom: 10px;
}

.plan-bar span {
  display: block;
  height: 100%;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
}

.plan-bar.gold span {
  background:
    linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
}

.report-table {
  display: grid;
  gap: 10px;
}

.report-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.report-row em {
  color: var(--muted);
  font-style: normal;
}

.chat-layout {
  grid-template-columns: 320px minmax(0, 1fr);
}

.channel-list,
.messages {
  display: grid;
  gap: 10px;
}

.channel-list button {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  padding: 10px 12px;
}

.channel-list button.active {
  color: #ffffff;
  border-color: transparent;
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 42%, var(--metal-glow) 50%, var(--metal-mid) 58%, var(--metal-dark) 100%);
}

.message {
  padding: 12px;
}

.message span {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
  margin-bottom: 6px;
}

.message p {
  line-height: 1.45;
}

.message.mine {
  border-color: rgba(229, 196, 101, 0.5);
  background: var(--sand-soft);
}

.message.ai {
  background: #eefafa;
  border-color: rgba(43, 194, 199, 0.24);
}

.chat-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  margin-top: 14px;
}

.chat-input input {
  border: 0;
  outline: 0;
  min-width: 0;
}

/* ---------- Раздел «Письма» ----------
   Слева список писем, справа правка и живой пример. Пример
   стоит рядом, а не по кнопке: править текст, не видя, что из
   него складывается, — это править вслепую. */
.letters-layout { grid-template-columns: minmax(0, 1fr); }
.letters-body {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.letters-list { display: grid; gap: 16px; position: sticky; top: 8px; }
.letters-group { display: grid; gap: 4px; }
.letters-group h4 {
  margin: 0 0 4px; font-size: var(--ш-11); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); display: grid; gap: 2px;
}
.letters-group h4 span {
  text-transform: none; letter-spacing: 0; font-size: var(--ш-11-5); font-weight: 400;
}
.letters-item {
  display: grid; gap: 2px; text-align: left; width: 100%;
  border: 1px solid transparent; border-radius: 10px; background: none;
  padding: 8px 10px; cursor: pointer; font-family: inherit; color: var(--ink);
}
.letters-item:hover { background: var(--surface-soft); }
.letters-item.on { background: var(--surface-soft); border-color: var(--metal-mid); }
.letters-item strong { font-size: var(--ш-13); }
.letters-item small { font-size: var(--ш-11-5); color: var(--muted); line-height: 1.35; }
.letters-edited { font-style: normal; font-size: var(--ш-11); color: var(--green); }

.letters-editor {
  display: grid; gap: 16px; min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "edit preview" "act act";
}
.letters-editor-head { grid-area: head; display: grid; gap: 6px; }
.letters-editor-head h3 { margin: 0; font-size: var(--ш-16); }
.letters-editor-head p { margin: 0; font-size: var(--ш-12-5); color: var(--muted); }
.letters-edit { grid-area: edit; display: grid; gap: 12px; align-content: start; min-width: 0; }
.letters-preview { grid-area: preview; display: grid; gap: 8px; align-content: start; min-width: 0; }
.letters-actions { grid-area: act; }
.letters-preview-head {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  font-size: var(--ш-11); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.letters-preview-head b { text-transform: none; letter-spacing: 0; font-weight: 500; }
.letter-sheet {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft);
  padding: 14px; display: grid; gap: 10px; min-width: 0;
}
.letter-subject { margin: 0; font-size: var(--ш-13-5); display: grid; gap: 2px; }
.letter-subject span {
  font-size: var(--ш-10-5); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.letter-attach { margin: 0; font-size: var(--ш-12); color: var(--muted); }
.tpl-vars-label { font-size: var(--ш-11-5); color: var(--muted); margin-right: 2px; }

@media (max-width: 1100px) {
  .letters-body { grid-template-columns: minmax(0, 1fr); }
  .letters-list { position: static; }
  .letters-editor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "edit" "preview" "act";
  }
}

/* ---------- Подсказка имён по «собачке» ----------
   Поле и всплывающий список живут в одной коробке: список
   привязан к нижнему краю поля и раскрывается вверх — внизу
   экрана у формы отправки места нет. */
.mention-box { position: relative; min-width: 0; }
.mention-box > textarea, .mention-box > input { width: 100%; }
.mention-drop {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 40;
  min-width: 260px; max-width: 360px; max-height: 258px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 4px;
  display: grid; gap: 2px;
}
/* Пока подсказку никого не зовут — её не должно быть видно вовсе.
   Своё «display: grid» выше перебивает браузерное «hidden», и
   пустая рамка повисала поверх строки под заголовком. */
.mention-drop[hidden] { display: none; }
.mention-option {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 7px; font-family: inherit; font-size: var(--ш-13);
  color: var(--ink);
}
.mention-option span { font-size: var(--ш-11-5); color: var(--muted); }
.mention-option.on, .mention-option:hover { background: var(--surface-soft); }

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

.knowledge-card {
  padding: 14px;
  box-shadow: none;
}

.knowledge-card span {
  color: var(--teal);
  font-size: var(--ш-12);
  font-weight: 700;
}

@media (max-width: 1180px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-grid,
  .finance-layout,
  .service-layout,
  .knowledge-layout,
  .tasks-layout,
  .bookings-layout,
  .palette-layout,
  .brand-demo-layout,
  .reports-layout,
  .chat-layout,
  .module-layout,
  .request-layout,
  .request-card-layout,
  .booking-detail-layout,
  .booking-workspace,
  .tourist-card-layout,
  .role-flow,
  .helper-grid,
  .review-board,
  .settings-grid,
  .uon-booking-layout,
  .deal-layout {
    grid-template-columns: 1fr;
  }

  .booking-menu,
  .booking-right {
    position: static;
  }

  .booking-menu {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    align-items: center;
  }

  .booking-menu .label {
    display: none;
  }

  .deal-card {
    position: static;
  }
}

@media (max-width: 820px) {
  .shell {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px;
    max-width: 100vw;
    overflow: hidden;
  }

  .brand,
  .team-card {
    display: none;
  }

  .nav-list {
    display: flex;
    overflow-x: auto;
    max-width: 100%;
  }

  .nav-item {
    width: auto;
    min-width: max-content;
    grid-template-columns: 20px max-content;
  }

  .main {
    padding: 16px;
    max-width: 100vw;
    overflow: hidden;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented {
    width: 100%;
    overflow-x: auto;
  }

  .segmented button {
    flex: 1 0 auto;
  }

  .top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 42px;
  }

  .search,
  .primary-btn {
    min-width: 0;
    width: 100%;
  }

  .primary-btn {
    grid-column: 1 / -1;
  }

  .pipeline-strip,
  .process-strip,
  .request-facts,
  .request-sections,
  .service-board,
  .knowledge-grid,
  .task-board,
  .booking-grid,
  .booking-criteria,
  .booking-list-summary,
  .palette-grid,
  .product-dna,
  .brand-demo-grid,
  .report-grid,
  .report-row,
  .calendar-grid,
  .team-directory,
  .role-flow,
  .helper-grid,
  .review-board,
  .settings-grid,
  .booking-detail-head,
  .booking-facts,
  .booking-info-list,
  .tourist-grid,
  .booking-status-grid,
  .booking-sections,
  .uon-top-panel,
  .uon-summary,
  .uon-fields,
  .uon-service-card,
  .uon-money-grid,
  .uon-docs,
  .booking-meta {
    grid-template-columns: 1fr;
  }

  .booking-header-line,
  .booking-title-row,
  .tourist-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
  }

  .booking-status-stack {
    justify-items: start;
  }

  .booking-facts article {
    min-height: auto;
  }

  .booking-facts article:not(:last-child)::after {
    inset: auto 18px 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 196, 101, 0.55), var(--gold-glow), rgba(15, 143, 133, 0.38), transparent);
  }

  .request-facts article:not(:last-child)::after {
    inset: auto 14px 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 196, 101, 0.55), rgba(15, 143, 133, 0.32), transparent);
  }

  .booking-info-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .client-lines p {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .chat-input {
    grid-template-columns: 1fr;
  }

  .task-item {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 2px;
  }

  .metric-card {
    flex: 0 0 220px;
    min-height: 96px;
    padding: 14px;
  }

  .metric-card strong {
    font-size: var(--ш-22);
  }

  .ai-float {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }

  h1 {
    font-size: var(--ш-19);
  }
}

/* ============================================================
   НОВЫЕ БЛОКИ: роли, канбан, окна, платежи, ИИ-аудит
   ============================================================ */

/* --- Верхняя панель: липкая --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding-top: 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.topbar-left { display: flex; flex-direction: column; gap: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.today { font-size: var(--ш-12); color: var(--muted); }

.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; fill: var(--muted); }
.icon-btn.has-alerts::after {
  content: attr(data-count);
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--rose); color: #fff;
  font-size: var(--ш-11); font-weight: 600; display: grid; place-items: center;
}

/* --- Переключатель сотрудника --- */
.role-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; text-align: left;
}
.role-chip:hover { border-color: var(--metal-mid); }
.role-chip strong { display: block; font-size: var(--ш-13); color: var(--ink); }
.role-chip small { display: block; font-size: var(--ш-11); color: var(--muted); }
.role-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--metal-dark), var(--metal-mid));
  color: #fff; font-size: var(--ш-11); font-weight: 700; flex: none;
}
.user-switch { display: grid; gap: 8px; }
.user-switch-item {
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer;
}
.user-switch-item:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.user-switch-item.active { border-color: var(--metal-mid); box-shadow: inset 0 0 0 1px var(--metal-mid); }
.user-switch-item strong { display: block; font-size: var(--ш-14); }
.user-switch-item span { display: block; font-size: var(--ш-12); color: var(--metal-mid); }
.user-switch-item small { display: block; font-size: var(--ш-11); color: var(--muted); margin-top: 2px; }

/* --- Общие кнопки --- */
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-btn {
  border: 0; background: none; padding: 0; margin-top: 6px;
  color: var(--metal-mid); font-size: var(--ш-12); font-weight: 600;
  cursor: pointer; text-align: left; display: inline-block;
}
.link-btn:hover { text-decoration: underline; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.panel-foot { margin-top: 12px; display: flex; gap: 8px; }
.section-title { margin: 20px 0 10px; font-size: var(--ш-14); color: var(--muted); font-weight: 600; }

.empty-state {
  padding: 22px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 12px; font-size: var(--ш-13);
  display: grid; gap: 10px; justify-items: center;
}

/* --- Канбан --- */
.request-layout.kanban-mode { grid-template-columns: 1fr; }
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: start;
}
.lane {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--stage-color, var(--metal-mid));
  border-radius: 12px;
  padding: 10px;
  min-height: 160px;
}
.lane-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lane-head h3 { font-size: var(--ш-13); margin: 0; }
.lane-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--line); font-size: var(--ш-11); text-align: center; color: var(--ink);
}
.lane-sum { font-size: var(--ш-11); color: var(--muted); margin: 2px 0 8px; }
.lane-cards { display: grid; gap: 8px; }
.lane-empty {
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 14px 8px; text-align: center; font-size: var(--ш-11); color: var(--muted);
}
.lane.drop-hover { background: var(--sand-soft); border-color: var(--metal-mid); }

.deal-mini {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; cursor: pointer;
}
.deal-mini:hover { border-color: var(--metal-mid); box-shadow: var(--shadow); }
.deal-mini.dragging { opacity: 0.45; }
.deal-mini-top { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.deal-mini h3 { font-size: var(--ш-13); margin: 0; }
.deal-mini p { font-size: var(--ш-12); color: var(--muted); margin: 4px 0; }
.deal-meta { display: flex; justify-content: space-between; font-size: var(--ш-11); color: var(--ink); font-weight: 600; }
.deal-next { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.deal-next small { font-size: var(--ш-11); color: var(--muted); }

.swimlane { margin-bottom: 18px; }
.swimlane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.swimlane-head h3 { font-size: var(--ш-14); margin: 0; }

/* --- Задачи --- */
.task-item { align-items: flex-start; }
.task-item.done { opacity: 0.5; }
.task-item time { display: flex; flex-direction: column; }
.task-item time small { font-size: var(--ш-10); color: var(--muted); font-weight: 400; }
.task-actions { display: grid; gap: 6px; justify-items: end; }
.task-check {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff;
  cursor: pointer; color: var(--green); font-weight: 700;
}
.task-check:hover { border-color: var(--green); }
.task-column h3 { display: flex; align-items: center; gap: 6px; }

/* --- Селект этапа в карточке --- */
.stage-select { display: grid; gap: 3px; }
.stage-select span { font-size: var(--ш-10); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stage-select select {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; font-size: var(--ш-12); background: #fff; color: var(--ink);
}

/* --- Таблицы: кликабельные строки --- */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--sand-soft); }
/* Изменения по рейсам: было → стало, прямо в карточке брони */
.flight-changes { border-left: 3px solid var(--amber); }
.flight-change { border-top: 1px solid var(--line); padding: 9px 0; }
.flight-change:first-of-type { border-top: 0; }
.flight-change-head { display: flex; align-items: baseline; gap: 8px; }
.flight-change-head strong { font-size: var(--ш-12-5); }
.flight-change-head small { font-size: var(--ш-11); color: var(--muted); }
.flight-change-head .link-btn { margin-left: auto; }
.flight-change-body { margin-top: 6px; display: grid; gap: 3px; }
.flight-change-body .was {
  font-size: var(--ш-12); color: var(--muted); text-decoration: line-through;
}
.flight-change-body .now { font-size: var(--ш-12-5); font-weight: 600; }
.flight-change-body .same { font-size: var(--ш-12); color: var(--muted); }
.flight-changes.bad { border-left-color: var(--rose); }
.flight-change.alert { background: rgba(184, 107, 88, 0.05); border-radius: 8px; padding: 9px 10px; }
.flight-change .row-actions { margin-top: 7px; }

/* Изменение рейса, ещё не внесённое, — прямо на карточке рейса */
.param-flight.ждёт-правки { border-color: var(--rose); }
.pf-alert {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  background: rgba(184, 107, 88, 0.09); border-bottom: 1px solid var(--line);
  padding: 8px 12px; margin: -1px -1px 0; border-radius: 11px 11px 0 0;
}
.pf-alert strong { font-size: var(--ш-12-5); color: var(--rose); }
.pf-alert span { font-size: var(--ш-12-5); font-weight: 600; }
.pf-alert small { font-size: var(--ш-11); color: var(--muted); width: 100%; }
.pf-alert .primary-btn { margin-left: auto; }
.pf-alert.ok { background: rgba(15, 111, 115, 0.08); }
.pf-alert.ok strong { color: var(--green); }
.pf-said { margin-left: auto; font-style: normal; font-size: var(--ш-11-5); color: var(--green); }

.letters-who {
  border-left: 3px solid var(--metal-mid); padding-left: 10px;
  margin: 0 0 12px; font-size: var(--ш-12); line-height: 1.5;
}

/* Разбор завала просроченных задач */
.завал { border-left: 4px solid var(--amber); margin-bottom: 14px; }
.завал-кучки { display: grid; gap: 8px; margin-top: 10px; }
.завал-кучка {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--surface);
}
.завал-кучка > div { flex: 1; }
.завал-кучка strong { font-size: var(--ш-13); }
.завал-кучка p { margin: 3px 0 0; font-size: var(--ш-12); color: var(--muted); line-height: 1.45; }
.завал-кучка.живые { border-left: 3px solid var(--green); }
.завал-список { margin: 6px 0 0; padding-left: 18px; }
.завал-список li { font-size: var(--ш-12); color: var(--muted); line-height: 1.5; }
.завал-список b { color: var(--ink); }

/* Работа и результат: главный блок «Моего дня» */
.работа-итог { border-left: 4px solid var(--metal-mid); margin-bottom: 14px; }
.работа-итог.плохо { border-left-color: var(--rose); }
.работа-итог.важно { border-left-color: var(--amber); }
.работа-итог.хорошо { border-left-color: var(--green); }
.работа-строки { display: grid; gap: 7px; }
.работа-строка {
  margin: 0; font-size: var(--ш-13); line-height: 1.55; padding-left: 14px;
  position: relative; color: var(--ink);
}
.работа-строка::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--metal-mid);
}
.работа-строка.плохо::before { background: var(--rose); }
.работа-строка.важно::before { background: var(--amber); }
.работа-строка.хорошо::before { background: var(--green); }

/* ---------- Счётчик непрочитанного ----------

   Так это выглядит везде, где люди привыкли: небольшой круглый
   значок, ровно по цифре, а не квадрат во всю высоту строки.
   Двузначные числа вытягивают его в капсулу, трёхзначные —
   сменяются на «99+». */
.channel-list button > span {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: var(--ш-11-5); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: rgba(15, 23, 32, 0.07); color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.channel-list button > span:empty { display: none; }
.channel-list button.active > span {
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
/* Есть непрочитанное — значок становится заметным */
.channel-list button > span.есть {
  background: var(--rose); color: #fff;
  box-shadow: 0 1px 4px rgba(184, 107, 88, 0.45);
}
.channel-list button.active > span.есть {
  background: #fff; color: var(--rose); box-shadow: none;
}
.channel-list .кэш-канал { font-weight: 600; }
.кэш-панель { display: flex; flex-direction: column; min-height: 62vh; }
.кэш-лента {
  flex: 1; overflow-y: auto; max-height: 56vh; padding-right: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.кэш-лента .chat-bubble.думает { opacity: 0.6; font-style: italic; }
.кэш-пусто { flex: 1; display: grid; align-content: center; gap: 8px; padding: 22px 4px; }
.кэш-пусто h3 { font-size: var(--ш-17); margin: 0; }
.кэш-пусто p { font-size: var(--ш-13); color: var(--muted); margin: 0; max-width: 62ch; line-height: 1.55; }
.кэш-начать { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.кэш-ввод {
  display: flex; gap: 8px; align-items: flex-end;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.кэш-ввод textarea {
  flex: 1; resize: vertical; min-height: 44px; font: inherit; font-size: var(--ш-13);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  background: var(--surface); color: var(--ink);
}
.кэш-ввод .primary-btn { flex: none; }

/* Номер в строке списка открывает карточку в новой вкладке */
.row-num [data-act="запись-в-новой"] { cursor: alias; }
.row-num [data-act="запись-в-новой"]:hover {
  text-decoration: underline; text-underline-offset: 2px;
}

/* Лента рабочих комментариев по заявке */
.comment-feed { display: grid; gap: 8px; }
.comment-note {
  border: 1px solid var(--line); border-left: 3px solid var(--metal-mid);
  border-radius: 10px; padding: 8px 11px; background: var(--surface);
}
.comment-note-head { display: flex; align-items: baseline; gap: 8px; }
.comment-note-head strong { font-size: var(--ш-12); }
.comment-note-head small { font-size: var(--ш-11); color: var(--muted); }
.comment-note p { font-size: var(--ш-12-5); margin: 4px 0 0; line-height: 1.5; }

/* Что уже сделано по заявке */
.done-feed { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.done-feed-head { font-size: var(--ш-11); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 7px; }
.done-row { border-left: 2px solid var(--green); padding: 4px 0 4px 10px; margin-bottom: 8px; }
.done-row-head { display: flex; align-items: baseline; gap: 8px; }
.done-row-head strong { font-size: var(--ш-12-5); }
.done-row-head small { font-size: var(--ш-11); color: var(--muted); }
.done-row p { font-size: var(--ш-12-5); margin: 3px 0 0; color: var(--ink); line-height: 1.5; }

.sub-label { font-size: var(--ш-11); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 10px 0 4px; }
.sub-label:first-of-type { margin-top: 0; }
.request-note.red-flag {
  border-left: 3px solid var(--rose); padding-left: 10px;
  background: rgba(184, 107, 88, 0.06); border-radius: 0 8px 8px 0;
}

/* Строка причины отказа — тоже дорога в заявки, не только таблица */
.reject-row.clickable { cursor: pointer; }
.reject-row.clickable:hover { background: var(--sand-soft); }
td small { display: block; font-size: var(--ш-11); color: var(--muted); }
.danger { color: var(--rose); font-weight: 600; }
.success { color: var(--green); font-weight: 600; }

/* --- ИИ-аудит --- */
.audit-score {
  font-size: var(--ш-12); font-weight: 700; color: var(--metal-mid);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.audit-list { display: grid; gap: 8px; margin-top: 10px; }
.audit-item {
  display: grid; grid-template-columns: 10px 1fr; gap: 8px;
  padding: 9px 10px; border-radius: 10px;
  background: var(--surface-soft); border: 1px solid var(--line);
}
.audit-item strong { font-size: var(--ш-12-5); display: block; }
.audit-item p { font-size: var(--ш-11-5); color: var(--muted); margin: 2px 0 0; }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.audit-item.ok .audit-dot { background: var(--green); }
.audit-item.warn .audit-dot { background: var(--amber); }
.audit-item.bad .audit-dot { background: var(--rose); }
.audit-item.bad { border-color: rgba(200, 80, 60, 0.35); }

.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.scenario-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: var(--surface-soft); display: grid; gap: 6px; align-content: start;
}
.scenario-card strong { font-size: var(--ш-13-5); }
.scenario-card p { font-size: var(--ш-12); color: var(--muted); margin: 0; }
.scenario-card .pill { justify-self: start; }

/* --- Платёжный календарь --- */
.plan-groups { display: grid; gap: 16px; margin-top: 14px; }
.plan-group h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--ш-13); margin: 0 0 8px;
}
.plan-group h3 em { margin-left: auto; font-style: normal; font-size: var(--ш-12); color: var(--muted); }
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.plan-card {
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 10px; background: #fff;
}
.plan-card.in { border-left-color: var(--green); }
.plan-card.out { border-left-color: var(--rose); }
.plan-card.overdue { background: rgba(200, 80, 60, 0.05); }
.plan-card-top { display: flex; justify-content: space-between; gap: 6px; font-size: var(--ш-11); color: var(--muted); }
.plan-card strong { display: block; font-size: var(--ш-15); margin: 6px 0 3px; }
.plan-card p { font-size: var(--ш-12); margin: 0; }
.plan-card small { font-size: var(--ш-11); color: var(--muted); }

.settlement-item {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  background: #fff; display: grid; gap: 2px;
}
.settlement-item span { font-size: var(--ш-11); color: var(--muted); }
.settlement-item strong { font-size: var(--ш-14); color: var(--green); }
.settlement-item.out strong { color: var(--rose); }
.settlement-item.refund { border-style: dashed; }
.settlement-item p { font-size: var(--ш-11-5); color: var(--muted); margin: 0; }
.settlement-item.debt { background: var(--sand-soft); }
.settlement-item.plan { border-style: dashed; }
.settlement-item.overdue { border-color: var(--rose); }
.settlement-list { display: grid; gap: 8px; margin-top: 10px; }
.wide-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.qualification-list { display: grid; gap: 18px; margin-top: 16px; }
.qualification-group { display: grid; gap: 8px; }
.qualification-group h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: var(--ш-14); color: var(--sea-deep); }
.qualification-group h3 span { color: var(--muted); font-size: var(--ш-11); font-weight: 500; }
.qualification-card { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); align-items: center; }
.qualification-card > div:first-child { display: grid; gap: 3px; }
.qualification-card > div:first-child strong { justify-self: start; color: var(--ink); }
.qualification-card .qualification-result { display: grid; justify-items: end; gap: 2px; }
.qualification-card .qualification-result strong { color: var(--green); }
.qualification-card.wait { border-color: rgba(214, 173, 78, .55); background: #fffaf0; }
.qualification-card.wait .qualification-result strong { color: var(--gold-dark); }
.qualification-card.out { border-color: rgba(184, 107, 88, .35); background: #fffafa; }
.qualification-card.out .qualification-result strong { color: var(--rose); }

.rate-list { display: grid; gap: 8px; margin-top: 10px; }
.rate-list article {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-soft);
}
.rate-list span { font-size: var(--ш-11); color: var(--muted); display: block; }
.rate-list strong { font-size: var(--ш-14); }
.rate-list small { font-size: var(--ш-10-5); color: var(--muted); display: block; }

/* --- Статистика --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.stat-title { font-size: var(--ш-13); margin: 0 0 10px; }
.stat-rows { display: grid; gap: 10px; }
.stat-row span { font-size: var(--ш-12); font-weight: 600; }
.stat-row strong { font-size: var(--ш-13); }
.stat-row small { display: block; font-size: var(--ш-11); color: var(--muted); }
.stat-bar { height: 6px; background: var(--line); border-radius: 4px; margin: 4px 0; overflow: hidden; }
.stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--metal-mid), var(--metal-glow)); }

/* --- Команда --- */
.team-person {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff;
}
.team-person:hover { border-color: var(--metal-mid); }
.team-person strong { font-size: var(--ш-14); }
.team-person span { font-size: var(--ш-12); color: var(--metal-mid); }
.team-person small { font-size: var(--ш-11); color: var(--muted); }
.rights-table { display: grid; gap: 10px; margin-top: 10px; }
.rights-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface-soft); }
.rights-row p { font-size: var(--ш-11-5); color: var(--muted); margin: 2px 0 6px; }
.rights-row small { font-size: var(--ш-11); color: var(--muted); }

/* --- Туристы и календарь --- */
.tourist-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tourist-mini {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; cursor: pointer;
}
.tourist-mini:hover { border-color: var(--metal-mid); }
.tourist-mini strong { display: block; font-size: var(--ш-13); }
.tourist-mini span { display: block; font-size: var(--ш-11-5); color: var(--muted); }
.tourist-avatar.small { width: 34px; height: 34px; font-size: var(--ш-12); }
/* Дата рождения и возраст в карточке туриста: по ним считают
   детский тариф и понимают, с кем разговаривают. Не заполнено —
   так и пишем бледным: пустая строка выглядела бы как «данных
   нет вовсе». */
.tourist-mini .tourist-age { color: var(--choco-soft); }
/* Плашки в карточке жмутся к тексту: общее правило «строки внутри
   карточки — блоки» растягивало их на всю ширину. */
.tourist-mini .tourist-marks .pill { display: inline-flex; width: auto; }
.tourist-mini .tourist-age.пусто { color: var(--muted); opacity: 0.75; }
.history-line {
  display: grid; gap: 2px; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  background: #fff; cursor: pointer; margin-bottom: 8px;
}
.history-line:hover { border-color: var(--metal-mid); }
.history-line strong { font-size: var(--ш-13); }
.history-line span { font-size: var(--ш-11-5); color: var(--muted); }
.calendar-card {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: #fff;
}
.calendar-card:hover { border-color: var(--metal-mid); }
.calendar-card.back { background: var(--surface-soft); }
.calendar-card span { font-size: var(--ш-11); color: var(--muted); }
.calendar-card strong { font-size: var(--ш-13-5); }
.calendar-card p { font-size: var(--ш-12); color: var(--muted); margin: 0; }

.universal-item { display: grid; gap: 3px; }
.universal-item strong { font-size: var(--ш-13); }
.universal-item span { font-size: var(--ш-12); color: var(--muted); }

.document-check { display: grid; gap: 8px; }
.doc-line {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff;
  cursor: pointer; text-align: left;
}
.doc-line.ready { background: rgba(20, 150, 120, 0.06); border-color: rgba(20, 150, 120, 0.3); }
.doc-mark {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--green); font-weight: 700;
}
.doc-line small { font-size: var(--ш-11); color: var(--muted); }

/* --- Модальные окна --- */
.modal-root { display: none; }
.modal-root.open { display: block; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12, 30, 34, 0.42);
  backdrop-filter: blur(2px); z-index: 90;
}
.modal {
  position: fixed; z-index: 91;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(8, 40, 46, 0.3);
  overflow: hidden;
}
.modal-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: var(--ш-18); margin: 2px 0 0; }
.modal-head p { font-size: var(--ш-12-5); color: var(--muted); margin: 4px 0 0; }
.modal-close {
  border: 0; background: none; font-size: var(--ш-26); line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-soft);
}
.modal-text p { font-size: var(--ш-13); line-height: 1.55; }
.modal-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.modal-list li { font-size: var(--ш-12-5); line-height: 1.5; }
/* Комплект документов одним файлом. Подпись менеджера о полноте —
   не украшение: система файл не читает, отвечает человек. */
.комплект {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0 12px; background: var(--surface);
}
.комплект.ждёт { border-left: 3px solid var(--amber); }
.комплект.ok { border-left: 3px solid var(--green); }
.комплект-шапка { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.комплект-шапка strong { font-size: var(--ш-13-5); }
.комплект-файл { margin-top: 9px; display: grid; gap: 2px; }
.комплект-файл strong { font-size: var(--ш-13); }
.комплект-файл small { font-size: var(--ш-11-5); color: var(--muted); }
.комплект-коммент {
  margin: 6px 0 0; font-size: var(--ш-12-5); line-height: 1.5;
  padding: 7px 10px; background: var(--surface-soft);
  border-radius: 8px; white-space: pre-wrap;
}
.комплект-подпись {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: var(--ш-12-5); line-height: 1.5;
}
.комплект-подпись.ждёт { display: grid; gap: 6px; justify-items: start; }
.комплект-подпись small { font-size: var(--ш-11-5); color: var(--muted); line-height: 1.45; }
/* Отдельные строки документов, когда комплект уже проверен:
   видно, но не кричит. */
.document-check.dimmed { opacity: 0.55; }

/* Цифры по отделам в разборе: директору нужен не чужой список,
   а число. Нажал на плитку — открылся список этого отдела. */
.отделы-свод { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.отдел-плитка {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px; background: var(--surface); color: inherit;
  font-family: inherit; min-width: 190px;
}
.отдел-плитка:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.отдел-плитка strong { font-size: var(--ш-13); }
.отдел-плитка span { font-size: var(--ш-11-5); color: var(--muted); }
.отдел-плитка.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.отдел-плитка.on strong { color: var(--teal); }

/* Предварительная оценка комментария — пока модель ещё читает.
   Приглушаем, чтобы отметки не выглядели окончательными. */
.hint-line.dim { opacity: 0.6; }

/* Быстрые доли от себестоимости в плановом платеже: операторы
   просят круглыми, и набирать их руками незачем. */
.доли { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.доля {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 20px; padding: 3px 10px; cursor: pointer;
  font-family: inherit; font-size: var(--ш-11-5); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.доля:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.доля:active { transform: translateY(1px); }

/* Образец в переключателе размера текста: «Аа» тем кеглем,
   который получится. Выбирают глазами, а не по названию. */
.шкала-образец {
  display: block; font-weight: 700; line-height: 1;
  margin-bottom: 6px; color: var(--ink);
}
.шкала-прежняя { font-size: 13px; }
.шкала-крупная { font-size: 14px; }
.шкала-компактная { font-size: 13px; letter-spacing: -0.01em; }

/* Светофор сверки подтверждения: цвет отвечает на вопрос
   «можно отпускать туриста?» до того, как открыли файл. */
.svetofor {
  border: 1px solid var(--line); border-left: 4px solid var(--metal-mid);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--surface-soft);
}
.svetofor-head { display: flex; align-items: center; gap: 8px; }
.svetofor-head strong { font-size: var(--ш-13); }
.svetofor-head small { font-size: var(--ш-11); color: var(--muted); }
.svetofor-acts { display: flex; gap: 6px; margin-left: auto; }
.svetofor p { font-size: var(--ш-12); color: var(--muted); margin: 6px 0 0; }
.svetofor-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--metal-mid); flex: none;
}
.svetofor-list { margin: 8px 0 0; padding-left: 18px; }
.svetofor-list li { font-size: var(--ш-12); margin-bottom: 3px; }
.svetofor-znal {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: var(--ш-12);
}
.svetofor-znal small { font-size: var(--ш-11); color: var(--muted); }
.svetofor.wait { border-left-color: var(--amber); }
.svetofor.wait .svetofor-dot { background: var(--amber); }
.svetofor.good { border-left-color: var(--green); }
.svetofor.good .svetofor-dot { background: var(--green); }
.svetofor.bad { border-left-color: var(--rose); background: rgba(214, 69, 90, 0.05); }
.svetofor.bad .svetofor-dot { background: var(--rose); }

/* Тема и текст письма в окне предпросмотра. Просвет нужен не для
   красоты: у поля в фокусе рамка выходит за его край, и вплотную
   стоящая подпись следующего поля уходила под неё наполовину. */
.letter-fields { display: grid; gap: 14px; margin-top: 12px; }

.modal-head p:empty { display: none; }
.modal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.modal-facts div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.modal-facts span { font-size: var(--ш-11); color: var(--muted); display: block; }
.modal-facts strong { font-size: var(--ш-13); }
.ai-report-block {
  border: 1px solid var(--line); border-left: 3px solid var(--metal-mid);
  border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--surface-soft);
}
.ai-report-block.bad { border-left-color: var(--rose); }
.ai-report-block.warn { border-left-color: var(--amber); }
.ai-report-block.good { border-left-color: var(--green); }
.ai-report-block h3 { font-size: var(--ш-13); margin: 0 0 4px; }
.ai-report-block p { font-size: var(--ш-12); margin: 0; color: var(--muted); }
.draft-text {
  white-space: pre-wrap; font-family: inherit; font-size: var(--ш-12-5);
  line-height: 1.55; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; margin: 6px 0 0;
}
.print-preview { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.print-preview h3 { font-size: var(--ш-14); margin: 0 0 10px; }
.print-preview p { font-size: var(--ш-12-5); margin: 5px 0; }

/* --- Формы --- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.form-field { display: grid; gap: 4px; align-content: start; }
.form-field.full { grid-column: 1 / -1; }
.field-label { font-size: var(--ш-11); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.field-hint { font-size: var(--ш-11); color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 10px; font-size: var(--ш-13); font-family: inherit;
  color: var(--ink); background: #fff; width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: 2px solid var(--metal-glow); outline-offset: 1px; }
.form-field textarea { resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: var(--ш-12-5); color: var(--ink); }
.check input { width: auto; }
.static-value { font-size: var(--ш-13); padding: 9px 0; }

/* --- Уведомления --- */
.toast-root {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 95; display: grid; gap: 8px; justify-items: center;
}
.toast {
  background: var(--metal-dark); color: #fff;
  padding: 11px 18px; border-radius: 999px; font-size: var(--ш-13);
  box-shadow: 0 14px 40px rgba(8, 40, 46, 0.28);
  animation: toast-in 0.22s ease;
}
.toast.hide { opacity: 0; transition: opacity 0.3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Мелкое --- */
.task-feed.compact .task-item { padding: 8px 10px; }
.booking-tourist-list button { cursor: pointer; }
.right-menu button { cursor: pointer; }

@media (max-width: 1180px) {
  .kanban { grid-auto-columns: minmax(190px, 1fr); }
}

/* Канбан: боковая панель контроля становится горизонтальной */
.request-layout.kanban-mode > aside .cash-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.request-layout.kanban-mode > aside .ai-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  display: grid;
  gap: 10px;
}

/* Карточка брони теперь состоит из двух колонок: содержимое и правая панель */
.booking-card-only { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 1450px) {
  .booking-card-only { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1100px) {
  .booking-card-only { grid-template-columns: minmax(0, 1fr); }
}

/* Карточки-кнопки в «Моём дне» */
.flight-item, .payment-item {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.flight-item:hover, .payment-item:hover { border-color: var(--metal-mid); }
.flight-item .status-row, .payment-item .status-row { margin-top: 6px; }

/* Широкие таблицы (партнёры, финансы) прокручиваются, а не сжимаются */
.table-wrap table { min-width: 1080px; }
.table-wrap th, .table-wrap td { white-space: nowrap; }
.table-wrap td small { white-space: normal; }

/* Правые колонки прилипают ниже шапки страницы, а не под неё */
.booking-right,
.booking-menu { top: 78px; }

/* ============================================================
   КАРТОЧКА ТУРИСТА: вкладки, правка на месте, файлы
   ============================================================ */
.tourist-page { display: grid; gap: 14px; }

.tourist-title-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
}
.tourist-title-row h2 { margin: 0; font-size: var(--ш-20); }
.tourist-title-row p { margin: 2px 0 0; font-size: var(--ш-12-5); color: var(--muted); }
.tourist-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.tourist-columns {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.card-block-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.card-block-head h3 { margin: 0; font-size: var(--ш-14); }
.hint-line { font-size: var(--ш-11); color: var(--muted); margin-left: auto; }
.card-block { margin-bottom: 18px; }
.card-block:last-child { margin-bottom: 0; }

/* Поля, которые правятся прямо в карточке */
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.field-cell { display: grid; gap: 3px; align-content: start; }
.field-cell.wide { grid-column: 1 / -1; }
.field-cell > span {
  font-size: var(--ш-10-5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.field-cell > span em {
  font-style: normal; display: inline-grid; place-items: center;
  width: 13px; height: 13px; border-radius: 50%; background: var(--line);
  font-size: var(--ш-9); cursor: help; vertical-align: middle;
}
.field-cell input,
.field-cell select,
.field-cell textarea {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: var(--ш-13); font-family: inherit;
  color: var(--ink); background: #fff; width: 100%;
}
.field-cell input:hover, .field-cell select:hover, .field-cell textarea:hover { border-color: var(--metal-glow); }
.field-cell input:focus, .field-cell select:focus, .field-cell textarea:focus {
  outline: 2px solid var(--metal-glow); outline-offset: 1px; border-color: var(--metal-mid);
}
.field-cell textarea { resize: vertical; }
.field-cell input[data-translit] { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

.field-checks { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.field-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ш-12-5); cursor: pointer; }
.field-check input { margin-top: 2px; }

.field-note {
  margin-top: 10px; font-size: var(--ш-11-5); color: var(--muted);
  background: var(--surface-soft); border-radius: 8px; padding: 8px 10px;
}
.field-note.warn { background: var(--sand-soft); color: var(--ink); }

/* Вкладки внутри карточки */
.card-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px;
}
.card-tabs button {
  display: flex; align-items: center; gap: 5px;
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: 6px 11px; border-radius: 8px; font-size: var(--ш-12-5); color: var(--muted); font-family: inherit;
}
.card-tabs button:hover { background: var(--surface-soft); color: var(--ink); }
.card-tabs button.active {
  background: var(--metal-dark); color: #fff; border-color: var(--metal-dark);
}
.tab-count {
  font-style: normal; font-size: var(--ш-10-5); min-width: 16px; padding: 0 4px;
  border-radius: 8px; background: rgba(0, 0, 0, 0.12); text-align: center;
}
.card-tabs button.active .tab-count { background: rgba(255, 255, 255, 0.25); }

.doc-row {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin-bottom: 10px; background: var(--surface-soft);
}

/* Файлы и сканы */
.drop-zone {
  border: 2px dashed var(--line); border-radius: 14px;
  padding: 22px; text-align: center; display: grid; gap: 6px; justify-items: center;
  background: var(--surface-soft); margin-bottom: 14px;
}
.drop-zone strong { font-size: var(--ш-14); }
.drop-zone p { font-size: var(--ш-12); color: var(--muted); margin: 0; max-width: 420px; }
.drop-zone.drop-hover { border-color: var(--metal-mid); background: var(--sand-soft); }

.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.file-card {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
  display: grid; grid-template-rows: 140px auto;
}
.file-preview {
  background: var(--surface-soft); display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.file-preview img { width: 100%; height: 100%; object-fit: cover; }
.file-ext, .file-loading { font-size: var(--ш-12); color: var(--muted); font-weight: 600; letter-spacing: 0.06em; }
.file-info { padding: 10px; display: grid; gap: 5px; }
.file-info strong { font-size: var(--ш-12-5); word-break: break-word; }
.file-info small { font-size: var(--ш-11); color: var(--muted); }
.file-info select {
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px;
  font-size: var(--ш-11-5); font-family: inherit; background: #fff; color: var(--ink);
}
.file-view { max-height: 62vh; overflow: auto; text-align: center; }
.file-view img { max-width: 100%; border-radius: 10px; }
.file-view embed { width: 100%; height: 60vh; border-radius: 10px; }

/* ---------- Повернуть скан прямо в окне ----------
   Паспорта фотографируют как придётся: то боком, то вверх ногами.
   Крутим показ, сам файл не трогаем. На четверть оборота картинка
   встаёт поперёк — поэтому у повёрнутых пределы меняются местами. */
.file-view img.крутится { transition: transform 0.15s ease; }
.file-view img[data-угол="90"], .file-view img[data-угол="270"] {
  max-width: 58vh; max-height: 100%;
}
.file-view img[data-угол="90"] { transform: rotate(90deg); }
.file-view img[data-угол="180"] { transform: rotate(180deg); }
.file-view img[data-угол="270"] { transform: rotate(270deg); }
.file-повернуть {
  display: flex; gap: 6px; justify-content: center; margin-top: 10px;
}
.file-meta { font-size: var(--ш-12); color: var(--muted); margin-top: 10px; }
/* Список задач в разборе завала: что именно предлагают закрыть */
.завал-разбор { max-height: 56vh; overflow: auto; display: grid; gap: 6px; margin-top: 10px; }
.завал-строка {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.завал-строка strong { display: block; font-size: var(--ш-13); }
.завал-строка small { display: block; font-size: var(--ш-11-5); color: var(--muted); }
.завал-кучка .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }


.bonus-balance {
  display: grid; gap: 2px; padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--sand-soft);
}
.bonus-balance span { font-size: var(--ш-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bonus-balance strong { font-size: var(--ш-22); }
.bonus-balance small { font-size: var(--ш-11-5); color: var(--muted); }

.tourist-ai .ai-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); display: grid; gap: 10px; }

@media (max-width: 1180px) {
  .tourist-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ШИРИНА: таблицы прокручиваются внутри панели и не распирают страницу
   Элемент грид-раскладки по умолчанию не сжимается меньше содержимого —
   поэтому широкая таблица растягивала весь экран. min-width: 0 это снимает.
   ============================================================ */
.bookings-layout > *,
.request-layout > *,
.request-card-layout > *,
.finance-layout > *,
.reports-layout > *,
.module-layout > *,
.service-layout > *,
.tasks-layout > *,
.knowledge-layout > *,
.chat-layout > *,
.tourist-columns > *,
.tourist-card-layout > *,
.booking-workspace > *,
.booking-detail-grid > *,
.workspace-grid > *,
.metrics-grid > *,
.request-sections > * {
  min-width: 0;
}

.panel,
.booking-list,
.request-list,
.table-wrap,
.booking-center,
.request-main,
.card-tab-body {
  min-width: 0;
}

/* Прокрутка таблиц заметна: тонкая полоса вместо системной */
.booking-list::-webkit-scrollbar,
.request-list::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { height: 9px; }
.booking-list::-webkit-scrollbar-thumb,
.request-list::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 5px;
}
.booking-list::-webkit-scrollbar-thumb:hover,
.request-list::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--metal-glow); }


/* Поиск в фильтрах шире остальных полей, но переносится вместе с ними */
.booking-criteria .booking-search-field { grid-column: span 2; }
@media (max-width: 900px) { .booking-criteria .booking-search-field { grid-column: span 1; } }

/* На узких экранах боковая колонка уходит вниз, а не сдавливает таблицу */
@media (max-width: 1100px) {
  .module-layout,
  .bookings-layout,
  .request-layout,
  .finance-layout,
  .reports-layout,
  .service-layout,
  .tasks-layout,
  .knowledge-layout,
  .request-card-layout,
  .tourist-card-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Шапка страницы переносится, а не обрезает кнопки */
.topbar { flex-wrap: wrap; gap: 10px; }
.topbar-actions { flex-wrap: wrap; min-width: 0; }
.topbar-actions .search { min-width: 0; flex: 1 1 180px; }

/* ============================================================
   СВОРАЧИВАЕМОЕ МЕНЮ
   ============================================================ */
/* Кнопка сворачивания живёт в самом меню — рядом с логотипом,
   стрелка показывает, в какую сторону оно поедет. */
.sidebar-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-top .brand { flex: 1; min-width: 0; }

.nav-toggle {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-toggle svg { width: 17px; height: 17px; fill: var(--muted); transition: transform 0.18s ease; }
.nav-toggle:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.nav-toggle:hover svg { fill: var(--metal-mid); }

/* Подпись рядом с кнопкой, чтобы было понятно с первого раза */
.nav-toggle::after {
  content: "Свернуть меню";
  position: absolute; right: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--metal-dark); color: #fff;
  padding: 5px 10px; border-radius: 7px; font-size: var(--ш-11-5);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.14s ease;
  z-index: 40;
}
.nav-toggle { position: relative; }
.nav-toggle:hover::after { opacity: 1; }

.shell { transition: grid-template-columns 0.18s ease; }
.shell.nav-collapsed { grid-template-columns: 62px minmax(0, 1fr); }

.nav-collapsed .sidebar { padding: 16px 8px; overflow: visible; }
.nav-collapsed .brand > div:last-child,
.nav-collapsed .nav-label,
.nav-collapsed .team-card { display: none; }
.nav-collapsed .brand { justify-content: center; gap: 0; padding: 4px; }
.nav-collapsed .brand-mark { margin: 0; }

/* Свёрнутое меню: логотип сверху, кнопка под ним, стрелка развернулась */
.nav-collapsed .sidebar-top { flex-direction: column; gap: 8px; }
.nav-collapsed .sidebar-top .brand { flex: none; }
.nav-collapsed .nav-toggle svg { transform: rotate(180deg); }
.nav-collapsed .nav-toggle::after {
  content: "Развернуть меню";
  right: auto; left: calc(100% + 8px);
}
.nav-collapsed .nav-item {
  grid-template-columns: 20px;
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
.nav-collapsed .nav-item svg { margin: 0 auto; }

/* Подсказка с названием раздела при свёрнутом меню */
.nav-collapsed .nav-item { position: relative; }
.nav-collapsed .nav-item::after {
  content: attr(title);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) scale(0.96);
  background: var(--metal-dark); color: #fff;
  padding: 5px 10px; border-radius: 7px; font-size: var(--ш-12);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 40;
}
.nav-collapsed .nav-item:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

@media (max-width: 820px) {
  .shell.nav-collapsed { grid-template-columns: 1fr; }
  .nav-collapsed .nav-item::after { display: none; }
}

/* ---------- Задачи в карточке брони ---------- */
.quick-tasks {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 0 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.quick-tasks-label { font-size: var(--ш-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.quick-task {
  border: 1px dashed var(--line); border-radius: 999px;
  background: #fff; padding: 5px 12px; font-size: var(--ш-12);
  color: var(--metal-mid); cursor: pointer; font-family: inherit;
}
.quick-task:hover { border-style: solid; border-color: var(--metal-mid); background: var(--surface-soft); }

.side-task-list { display: grid; gap: 8px; margin-top: 10px; }
.side-task {
  display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.side-task.overdue { border-color: rgba(200, 80, 60, 0.4); background: rgba(200, 80, 60, 0.04); }
.side-task strong { font-size: var(--ш-12-5); display: block; line-height: 1.3; }
.side-task small { font-size: var(--ш-11); color: var(--muted); display: block; margin-top: 2px; }
.side-task .task-check { width: 22px; height: 22px; }
.side-empty { font-size: var(--ш-12); color: var(--muted); margin: 8px 0 0; }

/* ---------- Разбор подтверждения туроператора ---------- */
.parse-result { display: grid; gap: 6px; }
.parse-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; background: #fff;
}
.parse-row.ok { border-left: 3px solid var(--green); }
/* Жёлтая полоса — данные прочитаны, но не проверены контрольными
   цифрами: их обязан сверить человек. */
.parse-row.warn { border-left: 3px solid var(--amber); }
/* Отложенные из плана договоры: видно, но не кричит */
.plan-strip-pending { font-size: var(--ш-12); color: var(--amber); padding-top: 2px; }

/* Бланки договоров в базе знаний: их ищут глазами, а не поиском */
.kb-contracts { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.kb-contracts-head strong { display: block; font-size: var(--ш-14); }
.kb-contracts-head span { display: block; font-size: var(--ш-12); color: var(--muted); margin-top: 2px; }
.kb-contracts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.kb-contract { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.kb-contract strong { display: block; font-size: var(--ш-13); }
.kb-contract span { display: block; font-size: var(--ш-12); color: var(--muted); margin: 4px 0 6px; }
.kb-main { font-style: normal; font-size: var(--ш-11); color: var(--green); }
/* Метка в бланке: видно, что заполнится само */
.tpl-slot { background: var(--sand); color: inherit; padding: 0 3px; border-radius: 3px; }
.tpl-body { max-height: 50vh; overflow: auto; }

/* Подпись и печать в готовом договоре */
.contract-signer { font-size: var(--ш-13); padding: 8px 0; }
.contract-signer i { font-style: normal; color: var(--amber); }
.sign-line { position: relative; display: inline-block; }
.sign-line.with-stamp { padding-top: 54px; }
.sign-img { position: absolute; left: 0; bottom: 4px; height: auto;
  max-width: 200px; max-height: 76px; pointer-events: none; }
.sign-rule { letter-spacing: 1px; }
.sign-name { font-weight: 600; }
.sign-post { display: block; font-size: var(--ш-11); color: var(--muted); }
.stamp-line { position: relative; display: inline-block; }
.stamp-img { position: absolute; left: 28px; top: -44px; width: 159px; opacity: 0.85; pointer-events: none; }
@media print { .sign-img, .stamp-img { opacity: 1; } }

/* История курса в брони: по какому курсу что считали */
.rate-history { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.rate-rows { display: grid; gap: 4px; margin-top: 6px; }
.rate-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--ш-12); }
.rate-row span { color: var(--muted); }
.rate-row.now strong { color: var(--blue); }

/* Бренд и его юрлица в списке партнёров */
.brand-row > td { background: var(--sand); font-weight: 600; }
.brand-row small { display: block; font-weight: 400; font-size: var(--ш-11); color: var(--muted); }
tr.under-brand > td:first-child { padding-left: 26px; }
tr.under-brand > td:first-child strong { font-weight: 500; }

/* Сравнение периодов и свёрнутый хвост в статистике */
.stat-compare { margin: 14px 0 18px; }
.stat-compare tr.now td { background: var(--sand); font-weight: 600; }
.cmp-criteria { margin: 8px 0 12px; }

/* Что пробить в чеке: по этому наименованию сойдётся выгрузка ОФД */
.receipt-hint { display: block; font-size: var(--ш-10); color: var(--muted); max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-compare td small { display: block; font-size: var(--ш-11); color: var(--muted); font-weight: 400; }
.stat-row.stat-rest { opacity: 0.75; }
.stat-row.stat-rest span { font-style: italic; }

/* Тарифная сетка бонусов в карточке сотрудника */
.grade-block { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.grade-rows { display: grid; gap: 6px; margin: 8px 0; }
.grade-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--ш-12); }
.grade-row input { width: 120px; }

/* Обсуждение по брони и заявке */
.discussion .messages { max-height: 46vh; overflow: auto; }
.discussion-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.discussion-reactions { display: flex; gap: 4px; }
.discussion-reaction.active { background: rgba(20, 140, 150, 0.12); border-color: rgba(20, 140, 150, 0.5); }
.discussion-read-receipts { color: var(--muted); font-size: var(--ш-11); }
.discussion-form textarea { width: 100%; min-height: 70px; margin-top: 10px; }
.discussion-people { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: var(--ш-12); }
.chat-person { display: inline-flex; align-items: center; gap: 4px; }
.message.mentions-me { border-left: 3px solid var(--amber); }
/* Список веток в общем чате */
.thread-list { display: grid; gap: 6px; }
.thread-row { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.thread-row.unread { border-color: var(--amber); }
.thread-row span { font-size: var(--ш-12); color: var(--muted); }
.thread-row i { font-style: normal; font-size: var(--ш-11); color: var(--muted); }

/* Акции туроператоров в чате */
.promo-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.promo-row.fresh { border-color: var(--green); }
.promo-from { display: block; font-size: var(--ш-11); color: var(--muted); margin: 2px 0 6px; }
.promo-row p { font-size: var(--ш-12); margin: 0 0 6px; }
.parse-row span { font-size: var(--ш-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.parse-row strong { font-size: var(--ш-13); word-break: break-word; }
.parse-missing { display: flex; flex-wrap: wrap; gap: 6px; }
.parse-missing span {
  font-size: var(--ш-11-5); color: var(--muted);
  border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px;
}

/* ---------- Кнопка-закладка «Забрать тур» ---------- */
.settings-wide { grid-column: 1 / -1; }
.bookmarklet-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.bookmarklet {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--metal-dark), var(--metal-mid));
  color: #fff; text-decoration: none; font-size: var(--ш-13); font-weight: 600;
  padding: 9px 16px; border-radius: 9px; cursor: grab;
  box-shadow: 0 8px 20px rgba(8, 63, 70, 0.18);
}
.bookmarklet::before { content: "＋"; font-size: var(--ш-15); }
.bookmarklet:active { cursor: grabbing; }
.bookmarklet-hint { font-size: var(--ш-12); color: var(--muted); }

/* ---------- Вкладка «Договор» и печатная форма ---------- */
.contract-status {
  border-radius: 10px; padding: 11px 14px; font-size: var(--ш-12-5); margin-bottom: 14px;
}
.contract-status.ok { background: rgba(20, 150, 120, 0.08); border: 1px solid rgba(20, 150, 120, 0.3); }
.contract-status.warn { background: var(--sand-soft); border: 1px solid rgba(229, 196, 101, 0.5); }

.contract-table th, .contract-table td { font-size: var(--ш-12); }
.cell-missing { color: var(--rose); font-size: var(--ш-11-5); }

.contract-words {
  margin-top: 12px; display: grid; gap: 6px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.contract-words p { margin: 0; display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: baseline; }
.contract-words span { font-size: var(--ш-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.contract-words strong { font-size: var(--ш-13); }

.contract-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.print-doc {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; font-size: var(--ш-12-5); line-height: 1.5;
}
.print-head { text-align: center; margin-bottom: 14px; }
.print-head h2 { font-size: var(--ш-17); margin: 0 0 6px; letter-spacing: 0.02em; }
.print-head-row { display: flex; justify-content: space-between; font-size: var(--ш-12); color: var(--muted); }
.print-section { font-size: var(--ш-14); margin: 20px 0 8px; text-align: center; }
.print-doc h4 { font-size: var(--ш-13); margin: 16px 0 6px; }
.print-doc p { margin: 6px 0; }
.print-table { width: 100%; border-collapse: collapse; margin: 6px 0; min-width: 0; }
.print-table th, .print-table td {
  border: 1px solid var(--line); padding: 6px 8px; font-size: var(--ш-12); text-align: left; vertical-align: top;
}
.print-table th { background: var(--surface-soft); font-weight: 600; }
.print-table em { font-style: italic; color: var(--muted); font-size: var(--ш-11-5); }
.print-note { display: block; }
.print-signs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
}
.print-signs p { font-size: var(--ш-11-5); line-height: 1.45; }
.print-warning {
  background: var(--sand-soft); border: 1px solid rgba(229, 196, 101, 0.6);
  border-radius: 10px; padding: 10px 13px; font-size: var(--ш-12-5); margin-bottom: 12px;
}

/* ---------- Печать: на бумагу уходит только документ ----------

   Раньше всё, кроме окна, пряталось через «невидимость». Невидимое
   место на странице всё равно занимает — поэтому принтер выдавал
   семь страниц, из которых шесть пустых. Убираем каркас совсем. */
@media print {
  .shell, .mobile-bar, .полоса-обновления, .toast-box, #выпадашкаПоиска,
  #подсказкаУмногоПоиска, .помощник-кнопка { display: none !important; }
  .modal-backdrop { display: none !important; }
  #modalRoot { position: static !important; display: block !important; }
  .modal {
    position: static; transform: none;
    width: 100%; max-width: none; max-height: none;
    box-shadow: none; border-radius: 0; margin: 0;
  }
  .modal-head, .modal-foot, .no-print, .print-warning { display: none !important; }
  .modal-body { overflow: visible; padding: 0; max-height: none; }
  .print-doc { border: 0; padding: 0; }
  html, body { height: auto; background: #fff; }
}

/* ---------- Шапка-строка заявки, как в кабинете туроператора ---------- */
.booking-strip { padding: 14px 16px; margin-bottom: 12px; }
.strip-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.strip-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.strip-no { font-size: var(--ш-17); font-weight: 700; letter-spacing: 0.01em; }
.strip-meta { font-size: var(--ш-12); color: var(--muted); }
.strip-badges { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.strip-commission {
  font-size: var(--ш-12); font-weight: 600; color: var(--metal-mid);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}

.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.strip-cell { display: grid; gap: 2px; align-content: start; }
.strip-cell > span {
  font-size: var(--ш-10-5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.strip-cell > strong { font-size: var(--ш-15); line-height: 1.25; }
.strip-cell small { font-size: var(--ш-11); color: var(--muted); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pay-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 4px 0 3px; }
.pay-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--metal-mid), var(--metal-glow)); }

.strip-wishes, .strip-cancel {
  margin-top: 12px; font-size: var(--ш-12); line-height: 1.45;
  background: var(--surface-soft); border-radius: 9px; padding: 9px 11px;
}
.strip-cancel { background: var(--sand-soft); }
.strip-wishes span, .strip-cancel span {
  display: block; font-size: var(--ш-10-5); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px;
}

/* ---------- Состав тура ---------- */
.service-group { margin-bottom: 16px; }
.service-group h4 {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--ш-12-5); margin: 0 0 8px; color: var(--metal-mid);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.service-row {
  border: 1px solid var(--line); border-left: 3px solid var(--metal-mid);
  border-radius: 11px; padding: 12px; margin-bottom: 8px; background: #fff;
}
.service-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: var(--ш-12); color: var(--muted);
}
.service-foot strong { color: var(--ink); }
.service-total {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 12px 14px; border-radius: 11px; background: var(--surface-soft);
  border: 1px solid var(--line); margin-top: 6px;
}
.service-total span { font-size: var(--ш-12); color: var(--muted); }
.service-total strong { font-size: var(--ш-16); text-align: right; }
.service-total em { grid-column: 1 / -1; font-style: normal; font-size: var(--ш-11-5); color: var(--muted); }

/* ---------- График оплат ---------- */
.payplan { display: grid; gap: 8px; margin-top: 10px; }
.payplan-row {
  border: 1px solid var(--line); border-radius: 11px; padding: 11px; background: #fff;
}
.payplan-row.overdue { border-color: rgba(200, 80, 60, 0.45); background: rgba(200, 80, 60, 0.04); }
.payplan-row.covered { background: rgba(20, 150, 120, 0.05); }

.operator-messages { max-height: none; }
.operator-messages .message { max-width: 78%; }

.strip-status { display: grid; gap: 2px; }
.strip-status span { font-size: var(--ш-9-5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.strip-status select {
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px;
  font-size: var(--ш-12); font-family: inherit; background: #fff; color: var(--ink);
}

/* ============================================================
   РАСЧЁТЫ: план и факт в одной таблице
   ============================================================ */
.settle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(620px, 1fr)); gap: 14px; }
.settle-panel { padding: 18px; }
.settle-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.settle-head h3 { font-size: var(--ш-19); margin: 0; }

.settle-deadline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-soft); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 14px; font-size: var(--ш-12-5);
}
.settle-deadline span { color: var(--muted); }
.settle-deadline input {
  border: 0; border-bottom: 1px dashed var(--rose); background: none;
  color: var(--rose); font: 600 12.5px inherit; font-family: inherit;
  padding: 2px 0; cursor: pointer;
}
.settle-deadline em { font-style: normal; color: var(--muted); font-size: var(--ш-11-5); }
.settle-deadline.overdue { background: rgba(200, 80, 60, 0.07); }

.settle-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.settle-table th {
  font-size: var(--ш-11); text-transform: none; color: var(--muted); font-weight: 600;
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.settle-table td {
  padding: 9px 8px; border-bottom: 1px solid var(--line);
  font-size: var(--ш-12-5); vertical-align: top;
}
.settle-table td small { display: block; font-size: var(--ш-11); color: var(--muted); }
.settle-row.plan td { color: var(--muted); }
.settle-row.plan strong { font-weight: 500; }
.settle-row.overdue td { background: rgba(200, 80, 60, 0.05); }
.settle-row:hover td { background: var(--surface-soft); }

.settle-doc { width: 30px; }
.settle-doc-no { font-weight: 600; color: var(--metal-mid) !important; }
.settle-note { font-style: italic; }
.settle-sum { text-align: right; white-space: nowrap; }
.settle-sum.in strong { color: var(--green); }
.settle-sum.out strong { color: var(--rose); }
.settle-row.plan .settle-sum strong { color: var(--muted); }

.settle-actions { white-space: nowrap; text-align: right; width: 1%; }
/* В кассе значков в одной строке бывает до пяти — вправо они не
   помещаются и раздувают таблицу. Ставим столбиком: колонка узкая,
   строка чуть выше, зато вся таблица влезает без прокрутки. */
.operations-table td.settle-actions {
  white-space: normal; text-align: center; padding: 5px 3px; vertical-align: top;
}
.operations-table td.settle-actions .icon-line {
  /* Значки столбиком, но плотнее: их бывает до пяти, и при
     прежнем размере именно они задавали высоту всей строки —
     содержимого на три строки, а ряд на пять. */
  display: block; margin: 0 auto 2px;
  width: 22px; height: 22px; font-size: 11px;
}
.icon-line {
  border: 1px solid var(--line); background: #fff; border-radius: 7px;
  width: 24px; height: 24px; margin-left: 3px; cursor: pointer;
  font-size: var(--ш-12); color: var(--muted); line-height: 1; padding: 0;
}
.icon-line:hover { border-color: var(--metal-mid); color: var(--metal-mid); }

.settle-total td {
  border-bottom: 0; border-top: 2px solid var(--line);
  font-weight: 600; font-size: var(--ш-13); padding-top: 10px;
}
.settle-total.plan td { border-top: 0; padding-top: 2px; color: var(--muted); font-weight: 500; }

.settle-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.settle-summary div { display: grid; gap: 2px; }
.settle-summary span { font-size: var(--ш-10-5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.settle-summary strong { font-size: var(--ш-14); }

.kind-list { display: grid; gap: 8px; }
.kind-option {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; background: #fff;
}
.kind-option:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.kind-option strong { font-size: var(--ш-13-5); }
.kind-option span { font-size: var(--ш-11-5); color: var(--muted); }
.kind-option.plan { border-style: dashed; }

@media (max-width: 1500px) {
  .settle-grid { grid-template-columns: minmax(0, 1fr); }
}


/* Таблица расчётов узкая — общее правило для широких таблиц ей не подходит */
.table-wrap .settle-table { min-width: 460px; }
.table-wrap .settle-table th,
.table-wrap .settle-table td { white-space: normal; }
.table-wrap .settle-table .settle-sum,
.table-wrap .settle-table .settle-actions { white-space: nowrap; }
.settle-table td:nth-child(2) { max-width: 110px; }

/* Кликабельный номер заявки или брони в задаче */
.entity-link {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--metal-mid); cursor: pointer; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 2px;
}
.entity-link:hover { text-decoration-style: solid; }
.deal-age { display: block; margin-top: 3px; color: var(--muted); font-size: var(--ш-10-5); }

/* ---------- Себестоимость и комиссия ---------- */
.cost-block { margin-bottom: 14px; }
.cost-lines { display: grid; gap: 6px; margin-top: 14px; }
.cost-line {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 7px 11px; border-radius: 9px; background: var(--surface-soft);
}
.cost-line span { font-size: var(--ш-12-5); color: var(--muted); }
.cost-line strong { font-size: var(--ш-14); text-align: right; }
.cost-line em { font-style: normal; font-size: var(--ш-11); color: var(--muted); }
.cost-line.minus strong { color: var(--rose); }
.cost-line.total { background: var(--line); }
.cost-line.total strong { font-size: var(--ш-15); }
.cost-line.result { background: rgba(20, 150, 120, 0.1); }
.cost-line.result strong { font-size: var(--ш-17); color: var(--green); }
.cost-line.result.low { background: rgba(200, 80, 60, 0.1); }
.cost-line.result.low strong { color: var(--rose); }
.cost-pct { font-weight: 600; font-size: var(--ш-13) !important; }

.commission-warn {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--rose); color: #fff;
  font-size: var(--ш-11); font-weight: 700; font-style: normal; cursor: help;
  margin-right: 5px; vertical-align: middle;
}
.strip-commission.low { border-color: var(--rose); color: var(--rose); }

.cost-alert {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: var(--ш-12-5); line-height: 1.5;
  background: rgba(200, 80, 60, 0.08); border: 1px solid rgba(200, 80, 60, 0.35);
}
.cost-alert.warn { background: var(--sand-soft); border-color: rgba(229, 196, 101, 0.6); }
.cost-ok {
  margin-top: 12px; padding: 9px 13px; border-radius: 10px; font-size: var(--ш-12); color: var(--muted);
  background: rgba(20, 150, 120, 0.07);
}
.cost-deadline {
  margin-top: 10px; font-size: var(--ш-12); color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 10px;
}

/* ---------- Платёжный календарь списком ---------- */
.plan-table { width: 100%; border-collapse: collapse; }
.table-wrap .plan-table { min-width: 900px; }
.plan-table th {
  font-size: var(--ш-11); color: var(--muted); font-weight: 600; text-align: left;
  padding: 8px; border-bottom: 1px solid var(--line);
}
.plan-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: var(--ш-12-5); vertical-align: top; }
.plan-table td small { display: block; font-size: var(--ш-11); color: var(--muted); }
/* .plan-row — это СТРОКА ТАБЛИЦЫ планового платежа (<tr>), и больше
   ничего. Карточка плана продаж называется .sales-plan-row: когда её
   назвали тоже .plan-row и дали display:grid, разъехались все плановые
   платежи в кассе — строки таблицы стали сеткой из четырёх колонок. */
.plan-row:hover td { background: var(--surface-soft); }
.plan-row.overdue td { background: rgba(200, 80, 60, 0.05); }
.plan-running { text-align: right; font-weight: 600; white-space: nowrap; }
.plan-running.danger { color: var(--rose); }

/* ---------- Календарь сеткой ---------- */
.cal-nav { align-items: center; }
.cal-title { font-size: var(--ш-14); min-width: 130px; text-align: center; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px;
}
.cal-weekday {
  font-size: var(--ш-11); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); text-align: center; padding-bottom: 4px;
}
.cal-cell {
  min-height: 72px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; padding: 7px; text-align: left;
  display: flex; flex-direction: column; gap: 5px; font-family: inherit;
}
.cal-cell.empty { border: 0; background: none; cursor: default; }
.cal-cell:hover:not(.empty) { border-color: var(--metal-mid); }
.cal-cell.today { border-color: var(--metal-mid); box-shadow: inset 0 0 0 1px var(--metal-mid); }
.cal-cell.selected { background: var(--metal-dark); }
.cal-cell.selected .cal-num { color: #fff; }
.cal-cell.has-events { background: var(--surface-soft); }
.cal-cell.selected.has-events { background: var(--metal-dark); }
.cal-num { font-size: var(--ш-13); font-weight: 600; color: var(--ink); }
.cal-marks { display: flex; gap: 4px; flex-wrap: wrap; }
.mark {
  font-style: normal; font-size: var(--ш-10-5); font-weight: 700;
  border-radius: 6px; padding: 2px 5px; line-height: 1.2;
}
.mark.out { background: rgba(15, 167, 178, 0.16); color: var(--blue); }
.mark.back { background: rgba(20, 150, 120, 0.16); color: var(--green); }
/* Заселение — третье событие поездки рядом с вылетом и возвратом */
.mark.stay { background: #efe6fb; color: #5a2fa6; }

/* Значки в клетке месяца нажимаются: показывают только свой вид
   событий. Даём это понять — курсором и подсветкой. */
.cal-marks .mark[data-act] {
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.08s ease;
}
.cal-marks .mark[data-act]:hover {
  transform: scale(1.12);
  filter: brightness(0.94);
}
.mark.risk { background: var(--rose); color: #fff; }
.cal-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; font-size: var(--ш-11-5); color: var(--muted);
}
.cal-legend span { display: flex; gap: 5px; align-items: center; }
.cal-table { width: 100%; border-collapse: collapse; }
.table-wrap .cal-table { min-width: 760px; }
.cal-table th {
  font-size: var(--ш-11); color: var(--muted); font-weight: 600;
  text-align: left; padding: 8px; border-bottom: 1px solid var(--line);
}
.cal-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: var(--ш-12-5); }
.cal-table td small { display: block; font-size: var(--ш-11); color: var(--muted); }

/* ---------- Карточки сотрудников в зарплате ---------- */
.staff-list { display: grid; gap: 8px; }
.staff-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.staff-card.open { border-color: var(--metal-mid); box-shadow: var(--shadow); }
.staff-head {
  display: grid; grid-template-columns: 34px minmax(150px, 1.4fr) repeat(4, minmax(80px, 1fr)) 24px;
  gap: 12px; align-items: center; width: 100%; text-align: left;
  border: 0; background: none; padding: 12px 14px; cursor: pointer; font-family: inherit;
}
.staff-head:hover { background: var(--surface-soft); }
.staff-name strong { display: block; font-size: var(--ш-13-5); }
.staff-name small { font-size: var(--ш-11); color: var(--muted); }
.staff-fig { display: grid; gap: 1px; }
.staff-fig small { font-size: var(--ш-10); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.staff-fig strong { font-size: var(--ш-13-5); }
.staff-fig.pay strong { color: var(--green); }
.staff-toggle { color: var(--muted); font-size: var(--ш-11); text-align: right; }
.staff-body { padding: 0 14px 16px; border-top: 1px solid var(--line); }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.staff-block h4 { font-size: var(--ш-12-5); margin: 0 0 10px; color: var(--metal-mid); text-transform: uppercase; letter-spacing: 0.05em; }
.staff-edit { margin-top: 12px; }
.staff-sub { font-size: var(--ш-12-5); margin: 18px 0 8px; color: var(--metal-mid); text-transform: uppercase; letter-spacing: 0.05em; }
.staff-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 1100px) {
  .staff-head { grid-template-columns: 34px 1fr 24px; row-gap: 8px; }
  .staff-fig { grid-column: span 1; }
}

/* ---------- Подпись, печать, подписание ---------- */
.sign-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sign-slot { display: grid; gap: 8px; justify-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.sign-slot strong { font-size: var(--ш-13); }
.sign-preview {
  width: 100%; height: 110px; border: 1px dashed var(--line); border-radius: 9px;
  display: grid; place-items: center; background: var(--surface-soft);
  font-size: var(--ш-11-5); color: var(--muted); overflow: hidden;
}
.sign-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mrz-sample { font-family: ui-monospace, Menlo, monospace; font-size: var(--ш-11); letter-spacing: 0.02em; }

.sign-status { display: grid; gap: 10px; }
.sign-status-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--ш-12-5); }
.sign-status-row span { color: var(--muted); }
.sign-status-row em { font-style: normal; color: var(--green); font-weight: 600; }
.sign-log { border-top: 1px solid var(--line); padding-top: 9px; display: grid; gap: 4px; }
.sign-log p { margin: 0; font-size: var(--ш-11-5); color: var(--muted); }
.sign-log span { color: var(--metal-mid); font-weight: 600; }

.activity-panel .cash-summary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* ---------- Правила нумерации ---------- */
.numbering-list { display: grid; gap: 12px; margin-top: 12px; }
.numbering-row {
  border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: var(--surface-soft);
}
.numbering-row > strong { display: block; font-size: var(--ш-13); margin-bottom: 9px; }
.numbering-preview {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
}
.numbering-preview span { font-size: var(--ш-10-5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.numbering-preview strong { font-size: var(--ш-15); color: var(--metal-mid); }
.numbering-preview em { font-style: normal; font-size: var(--ш-11-5); color: var(--muted); }
.settings-grid code {
  background: var(--line); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: var(--ш-11-5);
}

/* ============================================================
   АВТОМАТИЧЕСКИЕ КАСАНИЯ И ПОЧТА
   ============================================================ */
.pending-list { margin-bottom: 8px; }
.pending-item {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 11px; padding: 12px 14px; margin-bottom: 8px; background: #fff;
}
.pending-main { flex: 1; min-width: 240px; }
.pending-main strong { display: block; font-size: var(--ш-13-5); }
.pending-main small { display: block; font-size: var(--ш-11-5); color: var(--muted); margin-top: 2px; }
.pending-subject { margin: 7px 0 0; font-size: var(--ш-12-5); color: var(--ink); font-style: italic; }
.pending-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.auto-list { display: grid; gap: 8px; }
.auto-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.auto-card.open { border-color: var(--metal-mid); box-shadow: var(--shadow); }
.auto-card.off { opacity: 0.6; }
.auto-head {
  display: grid; grid-template-columns: 28px 1fr auto 24px; gap: 12px;
  align-items: center; padding: 12px 14px;
}
.auto-toggle {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; color: var(--green); font-weight: 700; font-size: var(--ш-13); padding: 0;
}
.auto-card:not(.off) .auto-toggle { background: rgba(20, 150, 120, 0.1); border-color: var(--green); }
.auto-title { border: 0; background: none; text-align: left; cursor: pointer; padding: 0; font-family: inherit; }
.auto-title strong { display: block; font-size: var(--ш-13-5); }
.auto-title small { font-size: var(--ш-11-5); color: var(--muted); }
.auto-stats { display: grid; gap: 3px; justify-items: end; }
.auto-stats small { font-size: var(--ш-10-5); color: var(--muted); }
.auto-expand { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: var(--ш-11); }
/* Письма вручную: у них нет выключателя — включать письмо нечем,
   его просто шлёт менеджер. Поэтому первая колонка под кнопку
   не нужна, и заголовок занимает ширину строки, а не 28 пикселей. */
.auto-head.no-toggle { grid-template-columns: 1fr auto 24px; }
.auto-marks {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.auto-marks i { font-style: normal; font-size: var(--ш-11); color: var(--muted); white-space: nowrap; }
.auto-body { padding: 0 14px 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.auto-body textarea { font-family: inherit; line-height: 1.55; }

.tpl-vars { display: flex; flex-wrap: wrap; gap: 5px; }
.tpl-var {
  border: 1px dashed var(--line); border-radius: 999px; background: var(--surface-soft);
  padding: 3px 9px; font-size: var(--ш-11); color: var(--metal-mid); cursor: pointer;
  font-family: ui-monospace, Menlo, monospace;
}
.tpl-var:hover { border-style: solid; border-color: var(--metal-mid); }

.touch-log { display: grid; gap: 8px; margin-top: 10px; }
.touch-log article { border-left: 2px solid var(--line); padding-left: 10px; }
.touch-log span { font-size: var(--ш-10-5); color: var(--muted); }
.touch-log strong { display: block; font-size: var(--ш-12); margin: 2px 0; }
.touch-log p { margin: 0; font-size: var(--ш-11); color: var(--muted); }

.mail-preview p { font-size: var(--ш-12-5); margin: 4px 0; }
.mail-list { display: grid; gap: 8px; }
.mail-item {
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: #fff;
}
.mail-item.done { background: var(--surface-soft); }
.mail-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mail-head strong { font-size: var(--ш-13); }
.mail-subject { font-size: var(--ш-12-5); color: var(--ink); flex: 1; min-width: 160px; }
.mail-time { font-size: var(--ш-11); color: var(--muted); }
.mail-body p { margin: 6px 0; font-size: var(--ш-12); color: var(--muted); }
.mail-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.parse-row.change { border-left-color: var(--amber); }

/* ---------- ИИ: маршрутизация и лимиты ---------- */
.ai-routing { display: grid; gap: 8px; margin: 12px 0; }
.ai-route-row {
  display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1fr) 1.2fr;
  gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-soft);
}
.ai-route-row strong { font-size: var(--ш-12-5); display: block; }
.ai-route-row small { font-size: var(--ш-10-5); color: var(--muted); }
.ai-route-row select {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
  font-size: var(--ш-12-5); font-family: inherit; background: #fff; color: var(--ink);
}
.ai-price { font-style: normal; font-size: var(--ш-11); color: var(--muted); }

.ai-limits { display: grid; gap: 10px; }
.ai-limit-row {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(90px, 1.4fr) auto minmax(150px, 1fr);
  gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.ai-limit-row strong { font-size: var(--ш-12-5); }
.ai-limit-row > span { font-size: var(--ш-11-5); color: var(--muted); white-space: nowrap; }
.ai-bar { height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; }
.ai-bar i { display: block; height: 100%; background: var(--green); }
.ai-bar i.warn { background: var(--amber); }
.ai-bar i.danger { background: var(--rose); }

@media (max-width: 1000px) {
  .ai-route-row, .ai-limit-row { grid-template-columns: minmax(0, 1fr); }
}
.rule-cond { display: block; font-size: var(--ш-10-5); color: var(--metal-mid); margin-top: 2px; }
.pending-item.task { border-left-color: var(--blue); }

/* ---------- Сверка и отчёты агентов ---------- */
.month-pick {
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px;
  font-size: var(--ш-13); font-family: inherit; font-weight: 600; background: #fff; color: var(--ink);
}
.recon-table { width: 100%; border-collapse: collapse; }
.table-wrap .recon-table { min-width: 1180px; }
.recon-table th {
  font-size: var(--ш-11); color: var(--muted); font-weight: 600; text-align: left;
  padding: 8px; border-bottom: 1px solid var(--line);
}
.recon-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: var(--ш-12-5); vertical-align: top; }
.recon-table td small { display: block; font-size: var(--ш-11); color: var(--muted); }
.recon-row:hover td { background: var(--surface-soft); }

.report-list { display: grid; gap: 8px; }
.report-row-card {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(160px, 1fr) minmax(150px, 1fr) auto;
  gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff;
}
.report-main { display: flex; gap: 10px; align-items: center; }
.report-main strong { display: block; font-size: var(--ш-13-5); }
.report-main small { font-size: var(--ш-11); color: var(--muted); }
.report-figs { display: flex; gap: 16px; }
.report-figs div { display: grid; gap: 1px; }
.report-figs span { font-size: var(--ш-10); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.report-figs strong { font-size: var(--ш-13-5); }
.report-status { display: grid; gap: 3px; justify-items: start; }
.report-status small { font-size: var(--ш-10-5); color: var(--muted); }
.report-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Закрытый черновик месячных отчётов. Это рабочая полоса внутри
   отчётов, а не отдельная карточка: директор сразу видит, кто готов
   к сдаче и какие брони ещё не переданы в клиентский сервис. */
.monthly-report-draft {
  margin: 18px -18px 22px; padding: 18px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.monthly-report-draft .section-title-row {
  display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px;
}
.monthly-report-draft .section-title { margin: 3px 0 2px; }
.monthly-report-draft .hint-line { margin: 0; max-width: 760px; }
.monthly-report-row {
  grid-template-columns: minmax(220px, 1.15fr) minmax(360px, 1.7fr) minmax(220px, 1fr) auto;
}
.monthly-report-row .report-figs {
  display: grid; grid-template-columns: repeat(4, minmax(78px, 1fr)); gap: 8px 14px;
}
.monthly-agent-report .report-grid.compact { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.monthly-agent-report .print-signs > div { min-width: 0; }

@media (max-width: 1100px) {
  .report-row-card { grid-template-columns: minmax(0, 1fr); }
  .monthly-report-draft .section-title-row { align-items: stretch; flex-direction: column; }
  .monthly-report-row .report-figs { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .monthly-agent-report .report-grid.compact { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* Основная область отчётов уже заметно уже окна: справа остаётся
   аналитическая колонка. Поэтому на широком ноутбуке карточка может
   стать узкой раньше, чем сработает обычный breakpoint окна. Собираем
   месячный отчёт в читаемые строки и не отдаём содержимое за правый край. */
@media (max-width: 1300px) and (min-width: 1101px) {
  .monthly-report-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .monthly-report-row .report-figs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }
  .monthly-report-row .report-status,
  .monthly-report-row .report-actions {
    width: 100%;
  }
  .monthly-report-row .report-actions { justify-content: flex-start; }
  .monthly-report-row .report-main,
  .monthly-report-row .report-figs,
  .monthly-report-row .report-status { min-width: 0; }
}

@media (max-width: 620px) {
  .monthly-report-draft { margin-left: -12px; margin-right: -12px; padding: 14px 12px; }
  .monthly-report-row .report-figs,
  .monthly-agent-report .report-grid.compact { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ЗАДАЧИ СПИСКОМ
   ============================================================ */
.task-list { display: grid; gap: 4px; }
.task-list-more { padding: 12px 0 4px; text-align: center; }
.task-list-head {
  display: grid; grid-template-columns: 34px 92px minmax(200px, 2.2fr) minmax(190px, 1.3fr) 110px 90px 26px;
  gap: 10px; padding: 0 10px 8px; font-size: var(--ш-11); color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.task-line {
  display: grid; grid-template-columns: 34px 1fr 26px; gap: 10px; align-items: start;
  border: 1px solid transparent; border-bottom: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; background: #fff;
}
.task-line:hover { background: var(--surface-soft); }
.task-line.open { border-color: var(--metal-mid); background: #fff; box-shadow: var(--shadow); }
.task-line.overdue { background: rgba(200, 80, 60, 0.05); }
.task-line.done { opacity: 0.55; }
.task-line.done .task-name { text-decoration: line-through; }

.task-line-main {
  display: grid; grid-template-columns: 92px minmax(200px, 2.2fr) minmax(190px, 1.3fr) 110px 90px;
  gap: 10px; align-items: center; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 0; font-family: inherit; color: inherit;
}
.task-when strong { display: block; font-size: var(--ш-12-5); }
.task-when small { font-size: var(--ш-10-5); color: var(--muted); }
.task-name { font-size: var(--ш-13); line-height: 1.35; }
.task-sub {
  font-style: normal; font-size: var(--ш-10-5); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 6px; white-space: nowrap;
}
.task-marks { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.kind-mark {
  font-size: var(--ш-10-5); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.kind-touch { background: rgba(15, 167, 178, 0.14); color: var(--blue); }
.kind-base { background: rgba(120, 108, 114, 0.14); color: var(--muted); }
.kind-service { background: rgba(20, 150, 120, 0.14); color: var(--green); }
.task-entity { font-size: var(--ш-11-5); color: var(--metal-mid); font-weight: 600; }
.task-owner { font-size: var(--ш-11-5); color: var(--muted); }

/* --- раскрытая карточка --- */
.task-card { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.task-card-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 18px; }
.task-shift { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: var(--ш-12); }
.task-shift span { color: var(--muted); }
.task-sub-title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--ш-12); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--metal-mid); margin: 16px 0 8px;
}
.task-empty { font-size: var(--ш-12); color: var(--muted); margin: 0; }
.checklist { display: grid; gap: 5px; }
.check-item {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 9px; align-items: center;
  font-size: var(--ш-12-5); padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.check-item.done span { text-decoration: line-through; color: var(--muted); }
.task-comments { display: grid; gap: 7px; }
.task-comments article { border-left: 2px solid var(--line); padding-left: 10px; }
.task-comments span { font-size: var(--ш-10-5); color: var(--muted); }
.task-comments p { margin: 2px 0 0; font-size: var(--ш-12-5); }
.task-comments p,
.task-result p,
.comment-box,
.comment-note p,
.done-row p,
.reject-analysis strong,
.payroll-report-notes p,
.report-reflection {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.task-result {
  margin-top: 14px; background: rgba(20, 150, 120, 0.08); border-radius: 10px; padding: 10px 12px;
}
.task-result span { font-size: var(--ш-10-5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.task-result p { margin: 3px 0; font-size: var(--ш-12-5); }
.task-result small { font-size: var(--ш-11); color: var(--muted); }

.task-context {
  border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: var(--surface-soft);
}
.task-context-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.task-context-head strong { font-size: var(--ш-13); }
.task-context p { display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin: 5px 0; font-size: var(--ш-12); }
.task-context p span { color: var(--muted); font-size: var(--ш-11); }
.task-context.empty p { display: block; color: var(--muted); }
.task-meta { margin-top: 12px; display: grid; gap: 4px; }
.task-meta p { display: grid; grid-template-columns: 90px 1fr; gap: 8px; margin: 0; font-size: var(--ш-11-5); }
.task-meta span { color: var(--muted); }
.task-card-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

@media (max-width: 1180px) {
  .task-list-head { display: none; }
  .task-line-main { grid-template-columns: 80px 1fr; row-gap: 6px; }
  .task-marks, .task-entity, .task-owner { grid-column: 2; }
  .task-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Отказы по заявкам */
.reject-panel { border-left: 3px solid var(--rose); margin-bottom: 14px; }
.reason-list { display: grid; gap: 8px; }
.reason-row {
  display: grid; grid-template-columns: minmax(160px, 1.4fr) auto auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.reason-row input[type="text"] {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
  font-size: var(--ш-12-5); font-family: inherit; width: 100%;
}

/* Карточка тикета клиентского сервиса */
.service-ticket.open { border-color: var(--metal-mid); box-shadow: var(--shadow); }
.ticket-head { width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 0; font-family: inherit; color: inherit; }
.ticket-head strong { display: block; font-size: var(--ш-13); }
.ticket-head p { font-size: var(--ш-11-5); color: var(--muted); margin: 4px 0 6px; }
.ticket-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ticket-facts p { display: grid; grid-template-columns: 90px 1fr; gap: 8px; margin: 4px 0; font-size: var(--ш-11-5); }
.ticket-facts span { color: var(--muted); }

/* База знаний */
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tag-chip {
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  padding: 5px 13px; font-size: var(--ш-12); cursor: pointer; font-family: inherit; color: var(--muted);
}
.tag-chip:hover { border-color: var(--metal-mid); }
.tag-chip.active { background: var(--metal-dark); color: #fff; border-color: var(--metal-dark); }
.knowledge-card.open { grid-column: 1 / -1; border-color: var(--metal-mid); box-shadow: var(--shadow); }
.knowledge-head { width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 0; font-family: inherit; color: inherit; }
.article-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 12px; }

/* ---------- Выбор задач и групповые действия ---------- */
.task-list-head { grid-template-columns: 26px 34px 92px minmax(200px, 2.2fr) minmax(190px, 1.3fr) 110px 90px 26px; }
.task-line { grid-template-columns: 26px 34px 1fr 26px; }
.task-pick { display: grid; place-items: center; cursor: pointer; }
.task-pick input { width: 15px; height: 15px; cursor: pointer; }
.task-line.picked { background: var(--sand-soft); border-color: var(--metal-glow); }
.task-sub.repeat { color: var(--metal-mid); border-color: var(--metal-glow); font-size: var(--ш-12); }
.task-sub.bell { border-color: var(--amber); }

.bulk-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--metal-dark); color: #fff; border-radius: 11px;
  padding: 10px 14px; margin-bottom: 10px;
}
.bulk-bar strong { font-size: var(--ш-13); }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulk-actions .secondary-btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.bulk-actions .secondary-btn:hover { background: rgba(255, 255, 255, 0.24); }
.bulk-actions .link-btn { color: #fff; opacity: 0.85; }

/* ---------- Всплывающие напоминания ---------- */
.reminder-root {
  position: fixed; right: 20px; bottom: 20px; z-index: 92;
  display: none; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 40px));
}
.reminder-root.visible { display: flex; }
.reminder-card {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 13px; padding: 13px 15px;
  box-shadow: 0 18px 45px rgba(8, 40, 46, 0.25);
  animation: toast-in 0.25s ease;
}
.reminder-card.overdue { border-left-color: var(--rose); }
.reminder-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.reminder-head span { font-size: var(--ш-11); color: var(--muted); }
.reminder-close {
  border: 0; background: none; font-size: var(--ш-20); line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 2px;
}
.reminder-card strong { display: block; font-size: var(--ш-13-5); margin: 5px 0 7px; }
.reminder-card p { font-size: var(--ш-11-5); color: var(--muted); margin: 7px 0 0; }
.reminder-actions { display: flex; gap: 8px; margin-top: 11px; }
.reminder-actions button { font-size: var(--ш-12); padding: 7px 12px; }

@media (max-width: 1180px) {
  .task-list-head { display: none; }
  .task-line { grid-template-columns: 26px 34px 1fr 26px; }
}

/* ---------- Карточка партнёра ---------- */
.main-entity { border-left: 3px solid var(--green); }
.doc-row .pill { margin-bottom: 8px; display: inline-block; }

.report-calendar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
.report-month {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; padding: 10px 12px; background: #fff; font-family: inherit;
}
.report-month:hover { border-color: var(--metal-mid); }
.report-month span { font-size: var(--ш-11); color: var(--muted); text-transform: capitalize; }
.report-month strong { font-size: var(--ш-12-5); }
.report-month small { font-size: var(--ш-10-5); color: var(--muted); }
.report-month.green { border-left-color: var(--green); background: rgba(20, 150, 120, 0.05); }
.report-month.amber { border-left-color: var(--amber); background: var(--sand-soft); }
.report-month.rose { border-left-color: var(--rose); background: rgba(200, 80, 60, 0.05); }
.report-month.blue { border-left-color: var(--line); }

.promo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.promo-card {
  border: 1px solid var(--line); border-left: 3px solid var(--metal-mid);
  border-radius: 11px; padding: 12px 14px; background: #fff;
}
.promo-card.expired { opacity: 0.55; border-left-color: var(--muted); }
.promo-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.promo-head strong { font-size: var(--ш-13); }
.promo-card p { font-size: var(--ш-12); color: var(--muted); margin: 7px 0; }
.promo-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.promo-foot small { font-size: var(--ш-10-5); color: var(--muted); }

/* Карточка счёта */
.account-card {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit; width: 100%;
}
.account-card:hover { border-color: var(--metal-mid); box-shadow: var(--shadow); }
.account-card .status-row { margin-top: 8px; }

/* ---------- Подбор туров ---------- */
.offers-panel { grid-column: 1 / -1; }
.offer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.offer-card {
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 11px; padding: 12px; background: #fff;
}
.offer-card.понравился { border-left-color: var(--blue); }
.offer-card.забронирован { border-left-color: var(--green); background: rgba(20, 150, 120, 0.05); }
.offer-card.отклонён { border-left-color: var(--muted); opacity: 0.65; }
.offer-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.offer-head strong { font-size: var(--ш-13); line-height: 1.3; }
.offer-facts { margin: 8px 0; }
.offer-facts p { margin: 2px 0; font-size: var(--ш-11-5); color: var(--muted); }
.offer-price { border-top: 1px solid var(--line); padding-top: 8px; }
.offer-price strong { font-size: var(--ш-15); }
.offer-price small { display: block; font-size: var(--ш-11); color: var(--muted); }
.offer-note { font-size: var(--ш-11-5); font-style: italic; color: var(--ink); margin: 8px 0 0; }
.offer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px; }

/* Архив счетов */
.archive-block { margin: 14px 0; }
.report-grid.archived { margin-top: 10px; opacity: 0.75; }
.account-card.archived { border-style: dashed; }

/* Итоги операций: приход и расход цветом */
.booking-list-summary article.income strong { color: var(--green); }
.booking-list-summary article.expense strong { color: var(--rose); }
.cash-tabs { margin-top: 18px; }
.field-current { display: block; font-size: var(--ш-11); color: var(--muted); margin-top: 4px; }

/* ============================================================
   ШАПКА КАРТОЧКИ: кнопки переносятся на вторую строку
   Ряд из шести кнопок не помещался в колонку карточки и распирал
   всю страницу — из-за этого правая колонка уезжала за край экрана.
   ============================================================ */
.booking-header-line,
.booking-title-row,
.widget-head {
  flex-wrap: wrap;
  min-width: 0;
}

.booking-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.booking-header-actions > button { white-space: nowrap; }

.request-main > *,
.request-side > *,
.booking-center > *,
.booking-right > *,
.tourist-main > *,
.tourist-side > * {
  min-width: 0;
}

/* Кнопки карточки — отдельной строкой под ссылкой «Назад», слева направо */
.booking-header-line > .back-link { flex: 1 0 100%; text-align: left; }
.booking-header-line > .booking-header-actions { justify-content: flex-start; flex: 1 1 auto; }

/* Строка задачи сжимается вместе с колонкой, а не распирает её */
.task-list-head { grid-template-columns: 26px 34px 92px minmax(0, 2.2fr) minmax(0, 1.3fr) 110px 90px 26px; }
.task-line-main { grid-template-columns: 92px minmax(0, 2.2fr) minmax(0, 1.3fr) 110px 90px; }

/* Метка типа задачи переносится, а не вылезает из своей колонки */
.task-list-head { grid-template-columns: 26px 34px 92px minmax(0, 2.2fr) minmax(0, 1.3fr) 124px 90px 26px; }
.task-line-main { grid-template-columns: 92px minmax(0, 2.2fr) minmax(0, 1.3fr) 124px 90px; }
.task-marks { min-width: 0; }
.task-marks .kind-mark { white-space: normal; line-height: 1.25; max-width: 100%; }

/* ============================================================
   КОНВЕРСИЯ — считается по закрытым сделкам, поэтому вынесена
   в отдельный крупный блок с расшифровкой
   ============================================================ */
.conversion-panel {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 143, 133, 0.06), #ffffff 62%);
}
.conversion-panel.warn { border-left-color: var(--amber); background: linear-gradient(135deg, rgba(214, 158, 46, 0.08), #ffffff 62%); }
.conversion-panel.bad { border-left-color: var(--rose); background: linear-gradient(135deg, rgba(200, 80, 60, 0.07), #ffffff 62%); }

.conversion-figure span {
  display: block; font-size: var(--ш-11); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.conversion-figure strong {
  display: block; font-size: var(--ш-38); line-height: 1.05;
  font-weight: 700; color: var(--teal); margin: 2px 0 8px;
}
.conversion-panel.warn .conversion-figure strong { color: var(--amber); }
.conversion-panel.bad .conversion-figure strong { color: var(--rose); }
.conversion-figure small { display: block; margin-top: 5px; font-size: var(--ш-11); color: var(--muted); }

.conversion-break {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  min-width: 0;
}
.conversion-break article {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; background: #fff; min-width: 0;
}
.conversion-break span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.conversion-break strong { display: block; font-size: var(--ш-19); font-weight: 700; }
.conversion-break small { display: block; font-size: var(--ш-10); color: var(--muted); margin-top: 1px; }
.conversion-break .won strong { color: var(--green); }
.conversion-break .lost strong { color: var(--rose); }
.conversion-break .open, .conversion-break .skip { opacity: 0.72; }

.conversion-note {
  grid-column: 1 / -1;
  margin: 2px 0 0; font-size: var(--ш-11); color: var(--muted); line-height: 1.45;
}

.conv-cell strong { display: block; }
.conv-cell small { display: block; font-size: var(--ш-10-5); color: var(--muted); }

@media (max-width: 900px) {
  .conversion-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ДОПУСК К ВЫПЛАТЕ: отчёт сдан + квалификация защищена
   ============================================================ */
.payout-gate {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
  background: rgba(46, 138, 92, 0.05);
}
.payout-gate.blocked { border-left-color: var(--amber); background: rgba(214, 158, 46, 0.06); }

.payout-gate-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.payout-gate-head strong { font-size: var(--ш-14); }
.payout-gate-head span { font-size: var(--ш-11-5); color: var(--muted); }

.payout-conds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
}
.payout-conds article {
  display: flex; gap: 9px; align-items: flex-start; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.payout-conds article > span {
  flex: 0 0 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--ш-12); font-weight: 700;
}
.payout-conds .done > span { background: rgba(46, 138, 92, 0.16); color: var(--green); }
.payout-conds .wait > span { background: rgba(214, 158, 46, 0.18); color: var(--amber); }
.payout-conds strong { display: block; font-size: var(--ш-12-5); }
.payout-conds small { display: block; font-size: var(--ш-11); color: var(--muted); }

.payout-blockers { margin: 9px 0 0; font-size: var(--ш-11-5); color: var(--rose); }

.pay-block {
  display: block; font-style: normal; font-size: var(--ш-10);
  color: var(--amber); font-weight: 600; margin-top: 1px;
}

.months-table .current-month { background: var(--sand-soft); }
.months-table td small { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.secondary-btn.disabled { opacity: 0.55; }

/* ============================================================
   КАРТОЧКА ТУРИСТА: соцсети, связи, письма
   ============================================================ */
.social-chip {
  display: inline-block; font-size: var(--ш-11); font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; color: var(--teal); text-decoration: none;
  background: #fff;
}
.social-chip:hover { border-color: var(--teal); background: rgba(15, 143, 133, 0.07); }
.social-chip.flat { color: var(--muted); font-weight: 500; }

.comm-list { display: grid; gap: 10px; }
.comm-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff;
}
.comm-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--ш-12); font-weight: 700;
  background: var(--sand-soft); color: var(--ink);
}
.comm-avatar.role-manager { background: rgba(15, 143, 133, 0.14); color: var(--teal); }
.comm-avatar.role-rop { background: rgba(58, 110, 165, 0.16); color: var(--blue); }
.comm-avatar.role-service { background: rgba(214, 158, 46, 0.18); color: var(--amber); }
.comm-avatar.role-director, .comm-avatar.role-admin { background: rgba(140, 110, 60, 0.16); }

.comm-body { min-width: 0; }
.comm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.comm-head strong { font-size: var(--ш-13); }
.comm-role {
  font-style: normal; font-size: var(--ш-10-5); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
}
.comm-when { font-size: var(--ш-11); color: var(--muted); margin-left: auto; }
.comm-body p { margin: 5px 0 0; font-size: var(--ш-13); line-height: 1.45; }

.relation-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.relation-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: #fff; min-width: 0;
}
.relation-open {
  display: flex; gap: 10px; align-items: center; width: 100%;
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.relation-open:hover strong { color: var(--teal); }
.relation-open strong { display: block; font-size: var(--ш-13); }
.relation-open small { display: block; font-size: var(--ш-11); color: var(--muted); }
.tourist-avatar.small { width: 34px; height: 34px; font-size: var(--ш-12); }
.relation-card .row-actions { margin-top: 8px; }

.touch-plan { display: grid; gap: 8px; }
.touch-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px auto;
  gap: 10px; align-items: center;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 9px 12px; background: #fff;
}
.touch-row.overdue { border-left-color: var(--amber); }
.touch-row.отправлено { border-left-color: var(--green); opacity: 0.72; }
.touch-row.отменено { border-left-color: var(--line); opacity: 0.5; }
.touch-date strong, .touch-text strong { display: block; font-size: var(--ш-12-5); }
.touch-date small, .touch-text small { display: block; font-size: var(--ш-10-5); color: var(--muted); }

@media (max-width: 860px) {
  .touch-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   СЕРИИ ПИСЕМ И СЕГМЕНТЫ БАЗЫ
   ============================================================ */
.segment-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.segment-card {
  position: relative; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: #fff; min-width: 0;
}
.segment-card strong { display: block; font-size: var(--ш-13); padding-right: 42px; }
.segment-card small { display: block; font-size: var(--ш-11); color: var(--muted); margin: 4px 0 10px; }
.segment-count {
  position: absolute; top: 10px; right: 12px;
  font-size: var(--ш-20); font-weight: 700; color: var(--teal);
}
.segment-card .secondary-btn { width: 100%; }

.series-step {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface-soft);
}
.series-step-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px;
}
.series-step-head strong { font-size: var(--ш-12-5); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pending-subject.danger { color: var(--rose); }

/* В шапке сотрудника пять цифр: продажи, комиссия, план, бонусы, к выплате */
.staff-head { grid-template-columns: 34px minmax(150px, 1.3fr) repeat(5, minmax(78px, 1fr)) 24px; }
.staff-fig.pay { min-width: 0; }

/* ============================================================
   КАССА: чек отмечается кликом, строка открывается на правку
   ============================================================ */
.plan-table tr.clickable { cursor: pointer; }
.plan-table tr.clickable:hover { background: var(--surface-soft); }

.receipt-toggle {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: var(--ш-11); font-weight: 600;
  background: #fff; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.receipt-toggle.todo { color: var(--rose); border-color: rgba(200, 80, 60, 0.4); background: rgba(200, 80, 60, 0.07); }
.receipt-toggle.done { color: var(--green); border-color: rgba(46, 138, 92, 0.4); background: rgba(46, 138, 92, 0.08); }
.receipt-toggle.none { color: var(--muted); }
.receipt-toggle:hover { border-color: var(--teal); color: var(--teal); }

/* ============================================================
   ЖУРНАЛ ДЕЙСТВИЙ
   ============================================================ */
.audit-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.audit-alerts article {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; min-width: 0;
}
.audit-alerts span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.audit-alerts strong { display: block; font-size: var(--ш-12-5); margin-top: 2px; }
.audit-alerts p { margin: 3px 0 0; font-size: var(--ш-11-5); }
.audit-alerts small { display: block; font-size: var(--ш-11); color: var(--muted); margin-top: 3px; }

.audit-table td { vertical-align: top; }
.audit-table td small { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.audit-detail { font-size: var(--ш-12); color: var(--muted); }
.audit-important { background: rgba(200, 80, 60, 0.05); }

/* ============================================================
   ПРИБЫЛЬ И РЕНТАБЕЛЬНОСТЬ
   ============================================================ */
.profit-panel {
  border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(46, 138, 92, 0.05), #ffffff 60%);
}
.profit-panel.warn { border-left-color: var(--amber); background: linear-gradient(135deg, rgba(214, 158, 46, 0.07), #ffffff 60%); }
.profit-panel.bad { border-left-color: var(--rose); background: linear-gradient(135deg, rgba(200, 80, 60, 0.07), #ffffff 60%); }

.profit-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.profit-head h3 { margin: 2px 0 0; font-size: var(--ш-17); }
.profit-figure { text-align: right; min-width: 0; }
.profit-figure span { display: block; font-size: var(--ш-11); color: var(--muted); }
.profit-figure strong { display: block; font-size: var(--ш-30); font-weight: 700; color: var(--green); line-height: 1.1; }
.profit-panel.warn .profit-figure strong { color: var(--amber); }
.profit-panel.bad .profit-figure strong { color: var(--rose); }
.profit-figure small { display: block; font-size: var(--ш-11); color: var(--muted); }

.pl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.pl-col h4 { margin: 0 0 8px; font-size: var(--ш-12); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.pl-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.pl-line span { font-size: var(--ш-13); }
.pl-line strong { font-size: var(--ш-14); white-space: nowrap; }
.pl-line small { grid-column: 1 / -1; font-size: var(--ш-10-5); color: var(--muted); margin-top: -3px; }
.pl-line.minus strong { color: var(--rose); }
.pl-line.sum { background: var(--surface-soft); padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.pl-line.sum strong { color: var(--teal); }
.pl-line.result { border-bottom: 0; }
.pl-line.result span, .pl-line.result strong { font-weight: 700; font-size: var(--ш-15); }
.pl-line.result strong { color: var(--green); }
.profit-panel.bad .pl-line.result strong { color: var(--rose); }

.pl-bars { display: grid; gap: 7px; }
.pl-bars article {
  display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto;
  gap: 8px; align-items: center; font-size: var(--ш-12);
}
.pl-bars strong { font-size: var(--ш-12-5); white-space: nowrap; }

.profit-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-top: 14px;
}
.profit-metrics article {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; min-width: 0;
}
.profit-metrics span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.profit-metrics strong { display: block; font-size: var(--ш-16); font-weight: 700; }
.profit-metrics small { display: block; font-size: var(--ш-10); color: var(--muted); }

@media (max-width: 980px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ГРАФИК КОМАНДЫ И ПОЗДРАВЛЕНИЯ
   ============================================================ */
.check-set {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}

.mark.team { background: rgba(58, 110, 165, 0.16); color: var(--blue); }
.mark.fest { background: rgba(214, 158, 46, 0.2); color: var(--amber); }

.team-events { display: grid; gap: 8px; }
.team-event {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 9px 12px; background: #fff;
}
.team-event.праздник { border-left-color: var(--amber); background: rgba(214, 158, 46, 0.04); }
.team-event.past { opacity: 0.55; }
.te-date strong { display: block; font-size: var(--ш-13); }
.te-date small { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.te-body { min-width: 0; }
.te-body strong { display: block; font-size: var(--ш-13); }
.te-body small { display: block; font-size: var(--ш-11); color: var(--muted); }
.te-people { display: inline-flex; gap: 4px; margin-top: 5px; }
.te-people i {
  font-style: normal; font-size: var(--ш-10); font-weight: 700;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sand-soft); color: var(--ink);
}

.celebrations { display: grid; gap: 8px; }
.celebrations article {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.celebrations .birthday { border-left: 3px solid var(--amber); }
.celebrations .anniversary { border-left: 3px solid var(--teal); }
.celebrations strong { display: block; font-size: var(--ш-12-5); }
.celebrations small { display: block; font-size: var(--ш-10-5); color: var(--muted); }

.staff-dates { margin-top: 10px; }
.staff-dates small { display: block; font-size: var(--ш-10-5); color: var(--muted); }

@media (max-width: 860px) {
  .team-event { grid-template-columns: minmax(0, 1fr); }
}

.pl-line.forecast { border-bottom: 0; opacity: 0.85; }
.pl-line.forecast strong { color: var(--muted); }

/* Фильтры отчёта: месяц, отдел, офис, сотрудник */
.report-filters { margin-bottom: 12px; }
.report-grid + .section-title { margin-top: 16px; }
.profit-scope { display: block; font-size: var(--ш-11); color: var(--muted); margin-top: 3px; }

/* ============================================================
   ИСТОРИЯ ПОКУПОК И РЕКОМЕНДАЦИИ
   ============================================================ */
.buy-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.buy-summary article {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; background: #fff; min-width: 0;
}
.buy-summary article.good { border-color: rgba(46, 138, 92, 0.4); background: rgba(46, 138, 92, 0.05); }
.buy-summary span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.buy-summary strong { display: block; font-size: var(--ш-17); font-weight: 700; }
.buy-summary small { display: block; font-size: var(--ш-10); color: var(--muted); }
.buy-summary article.good strong { color: var(--green); }

.muted-cell { color: var(--muted); font-size: var(--ш-11-5); }

.referrer-chip {
  border: 1px solid var(--teal); border-radius: 999px;
  padding: 3px 11px; font-size: var(--ш-11); font-weight: 600;
  background: rgba(15, 143, 133, 0.08); color: var(--teal);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.referrer-chip:hover { background: var(--teal); color: #fff; }
.referrer-chip.out { border-color: var(--amber); color: var(--amber); background: rgba(214, 158, 46, 0.1); }
.referrer-chip.out:hover { background: var(--amber); color: #fff; }

/* Архив: уволенные сотрудники и бывшие партнёры */
.staff-list.archived { opacity: 0.72; }
.staff-list.archived .staff-card { background: var(--surface-soft); }
.fired-badge {
  font-style: normal; font-size: var(--ш-10); font-weight: 600;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}
tr.row-archived { opacity: 0.6; }

/* ============================================================
   УТРЕННЯЯ СВОДКА
   ============================================================ */
.digest-hello { margin-bottom: 14px; }
.digest-hello strong { display: block; font-size: var(--ш-17); }
.digest-hello p { margin: 3px 0 0; font-size: var(--ш-12-5); color: var(--muted); }

.digest-block { margin-bottom: 14px; }
.digest-block h4 {
  margin: 0 0 6px; font-size: var(--ш-12); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.digest-block h4 i {
  font-style: normal; font-size: var(--ш-11); font-weight: 700;
  color: var(--rose); margin-left: 4px;
}
.digest-block.fest h4 { color: var(--amber); }

.digest-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.digest-list li {
  font-size: var(--ш-13); line-height: 1.4;
  border-left: 2px solid var(--line); padding: 3px 0 3px 10px;
}
.digest-block.fest .digest-list li { border-left-color: var(--amber); }
.digest-list li.more { color: var(--muted); font-size: var(--ш-11-5); border-left-color: transparent; }

.digest-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* ============================================================
   СПРАВОЧНИКИ
   ============================================================ */
.dir-list { display: grid; gap: 8px; }
.dir-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.dir-card.open { border-color: var(--metal-mid); box-shadow: var(--shadow); }

.dir-head {
  display: grid; grid-template-columns: minmax(160px, 1.6fr) repeat(4, minmax(90px, 1fr)) 24px;
  gap: 12px; align-items: center; width: 100%; text-align: left;
  border: 0; background: none; padding: 12px 14px; cursor: pointer; font-family: inherit;
}
.dir-head:hover { background: var(--surface-soft); }
.dir-name { min-width: 0; }
.dir-name strong { display: block; font-size: var(--ш-13-5); }
.dir-name small { display: block; font-size: var(--ш-11); color: var(--muted); }
.dir-fig { display: grid; gap: 1px; min-width: 0; }
.dir-fig small { font-size: var(--ш-10); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.dir-fig strong {
  font-size: var(--ш-12-5); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.contact-list { display: grid; gap: 7px; }
.contact-card {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: #fff;
}
.contact-card strong { font-size: var(--ш-12-5); }
.contact-card small { display: block; font-size: var(--ш-11); color: var(--muted); }

@media (max-width: 1000px) {
  .dir-head { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px; }
  .dir-fig { display: none; }
}

/* Статистика: столбики крупнее, убыточные строки красным */
.stat-rows.big { display: grid; gap: 8px; margin-bottom: 16px; }
.stat-rows.big .stat-row {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 110px;
  gap: 12px; align-items: center;
  border-bottom: 1px solid var(--line); padding: 7px 0;
}
.stat-rows.big .stat-row > span { font-size: var(--ш-13); font-weight: 600; }
.stat-rows.big .stat-row strong { font-size: var(--ш-13-5); text-align: right; }
.stat-rows.big .stat-row small {
  grid-column: 1 / -1; font-size: var(--ш-10-5); color: var(--muted); margin-top: -3px;
}
.stat-rows.big .stat-row.loss .stat-bar i { background: var(--rose); }
.stat-rows.big .stat-row.loss strong { color: var(--rose); }

@media (max-width: 860px) {
  .stat-rows.big .stat-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ ТУРИСТА
   Страница, которую видит клиент: ни туроператора, ни комиссии.
   ============================================================ */
.guest-root { display: none; }
body.guest-mode .guest-root {
  display: block; position: fixed; inset: 0; z-index: 900;
  overflow: auto; background: var(--sand-soft, #f7f5f0);
}
body.guest-mode .shell { display: none; }

.guest-page { max-width: 860px; margin: 0 auto; padding: 22px 18px 40px; }

.guest-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.guest-brand { display: flex; gap: 10px; align-items: center; }
.guest-brand img { width: 34px; height: 34px; object-fit: contain; }
.guest-brand strong { display: block; font-size: var(--ш-15); }
.guest-brand span { font-size: var(--ш-11); color: var(--muted); }
.guest-who { text-align: right; }
.guest-who strong { display: block; font-size: var(--ш-13-5); }
.guest-who span { font-size: var(--ш-11-5); color: var(--muted); }

.guest-preview-note {
  border: 1px dashed var(--metal-mid, #c9b27a); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 14px;
  font-size: var(--ш-12); color: var(--muted); background: #fff;
}

.guest-card {
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.guest-strip {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.guest-strip-main { min-width: 0; }
.guest-strip-main h2 { margin: 7px 0 3px; font-size: var(--ш-21); }
.guest-strip-main p { margin: 0; font-size: var(--ш-13); color: var(--muted); }
.guest-strip-when { text-align: right; min-width: 0; }
.guest-strip-when strong { display: block; font-size: var(--ш-15); }
.guest-strip-when span { font-size: var(--ш-11-5); color: var(--muted); }

.guest-status {
  display: inline-block; font-size: var(--ш-11); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 12px;
}
.guest-status.green { background: rgba(46, 138, 92, 0.14); color: var(--green); }
.guest-status.amber { background: rgba(214, 158, 46, 0.18); color: var(--amber); }
.guest-status.blue { background: rgba(58, 110, 165, 0.14); color: var(--blue); }
.guest-status.rose { background: rgba(200, 80, 60, 0.14); color: var(--rose); }

.guest-status-text {
  margin: 12px 0 0; font-size: var(--ш-13-5); line-height: 1.5;
}

.guest-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 16px;
}
.guest-cell {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; background: var(--surface-soft); min-width: 0;
}
.guest-cell span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.guest-cell strong { display: block; font-size: var(--ш-13); margin: 2px 0 1px; }
.guest-cell small { display: block; font-size: var(--ш-11); color: var(--muted); }

.guest-block { margin-top: 22px; }
.guest-block h3 {
  margin: 0 0 10px; font-size: var(--ш-12); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.guest-block h4 { margin: 14px 0 6px; font-size: var(--ш-13); }

.guest-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.guest-pay article {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; min-width: 0;
}
.guest-pay span { display: block; font-size: var(--ш-11); color: var(--muted); }
.guest-pay strong { display: block; font-size: var(--ш-19); font-weight: 700; }
.guest-pay small { display: block; font-size: var(--ш-11); color: var(--muted); }
.guest-pay .paid strong { color: var(--green); }
.guest-pay .debt { border-color: rgba(214, 158, 46, 0.5); background: rgba(214, 158, 46, 0.06); }
.guest-pay .debt strong { color: var(--amber); }
.guest-pay .done strong { color: var(--green); }

.pay-bar.big { height: 8px; margin-top: 12px; }

.guest-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: var(--ш-13); }
.guest-table th {
  text-align: left; font-size: var(--ш-10-5); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
  padding: 0 10px 6px 0; border-bottom: 1px solid var(--line);
}
.guest-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); }

.guest-list { margin: 0; padding-left: 18px; font-size: var(--ш-13); }
.guest-list li { margin-bottom: 4px; }

.guest-docs { display: grid; gap: 8px; }
.guest-docs article {
  display: flex; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px;
}
.guest-docs article > span {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--ш-12); font-weight: 700;
}
.guest-docs .ready > span { background: rgba(46, 138, 92, 0.16); color: var(--green); }
.guest-docs .wait > span { background: var(--sand-soft); color: var(--muted); }
.guest-docs .wait { opacity: 0.7; }
.guest-docs div { flex: 1 1 auto; min-width: 0; }
.guest-docs strong { display: block; font-size: var(--ш-13); }
.guest-docs small { display: block; font-size: var(--ш-11); color: var(--muted); }

.guest-note { margin: 0; font-size: var(--ш-13); line-height: 1.5; }
.guest-empty { margin: 0; font-size: var(--ш-13); color: var(--muted); }

.guest-contacts { border-top: 1px solid var(--line); padding-top: 18px; }
.guest-manager { display: flex; gap: 11px; align-items: center; margin-bottom: 10px; }
.guest-manager strong { display: block; font-size: var(--ш-13-5); }
.guest-manager small { font-size: var(--ш-11-5); color: var(--muted); }

.guest-foot {
  text-align: center; font-size: var(--ш-11); color: var(--muted);
  line-height: 1.6; padding: 10px 0 0;
}
.guest-exit { text-align: center; padding: 0 0 30px; }

.strip-status.guest select { border-color: var(--teal); font-weight: 600; }

@media (max-width: 640px) {
  .guest-card { padding: 16px 14px; }
  .guest-strip-when { text-align: left; }
}

/* Фишки множественного выбора в отчётах и статистике */
.chip-filter { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.chip-filter > span { font-size: var(--ш-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.chip-filter .chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.chip {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: var(--ш-12); font-family: inherit;
  background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }

/* Декомпозиция плана */
.decomp {
  border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(15, 143, 133, 0.05), #ffffff 60%);
}
.decomp-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.decomp-line article {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; background: #fff; min-width: 0;
}
.decomp-line span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.decomp-line strong { display: block; font-size: var(--ш-19); font-weight: 700; }
.decomp-line small { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.decomp-note { margin: 12px 0 0; font-size: var(--ш-12-5); line-height: 1.5; }

/* Причины отказов */
.reject-rows { display: grid; gap: 7px; }
.reject-row {
  display: grid; grid-template-columns: minmax(150px, 250px) minmax(0, 1fr) 50px;
  gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.reject-row > span { font-size: var(--ш-13); }
.reject-row strong { font-size: var(--ш-14); text-align: right; }
.reject-row small { grid-column: 1 / -1; font-size: var(--ш-10-5); color: var(--muted); margin-top: -3px; }
.reject-row .stat-bar i { background: var(--rose); }

/* План правится прямо в таблице отчёта */
.plan-cell input { width: 100%; max-width: 120px; font-size: var(--ш-12-5); padding: 4px 7px; }
.plan-cell .field-cell span { display: none; }

/* Палитра в настройках */
.palette-grid.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.palette-grid.compact .palette-card { padding: 9px 11px; }
.palette-card.on { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(15, 143, 133, 0.18); }

@media (max-width: 860px) {
  .reject-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   КАБИНЕТ: фирменная шапка, сияние и контакты в углу
   ============================================================ */
body.guest-mode .guest-root {
  background:
    radial-gradient(1100px 420px at 12% -8%, rgba(15, 143, 133, 0.10), transparent 62%),
    radial-gradient(900px 380px at 88% -4%, rgba(229, 196, 101, 0.14), transparent 60%),
    var(--sand-soft, #f7f5f0);
}

.guest-head {
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(120deg, #ffffff 0%, var(--surface-soft) 100%);
  box-shadow: var(--shadow);
}

.guest-brand { align-items: center; gap: 12px; }
.guest-logo { width: 46px; height: 46px; object-fit: contain; }
.guest-logo.missing { display: none; }
.guest-wordmark .brand-name { font-size: var(--ш-21); letter-spacing: -0.01em; }
.guest-wordmark > span { display: block; font-size: var(--ш-11); color: var(--muted); margin-top: 1px; }

/* Контакты агентства в правом верхнем углу — фон как у панелей CRM */
.guest-contacts-top { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.guest-contact {
  display: flex; gap: 10px; align-items: center; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px;
  background:
    linear-gradient(135deg, rgba(15, 143, 133, 0.07), #ffffff 62%);
  box-shadow: 0 8px 20px rgba(57, 38, 38, 0.06);
}
.guest-contact > div { min-width: 0; }
.guest-contact span { display: block; font-size: var(--ш-10); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.guest-contact strong { display: block; font-size: var(--ш-13); margin: 1px 0; }
.guest-contact a {
  display: block; font-size: var(--ш-12); color: var(--teal);
  text-decoration: none; font-weight: 600;
}
.guest-contact a:hover { text-decoration: underline; }

.guest-who-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin: 14px 2px 12px;
}
.guest-who-line strong { font-size: var(--ш-14); }
.guest-who-line span { font-size: var(--ш-12); color: var(--muted); }

/* Сияние по краю карточки — как у главных кнопок */
.guest-card {
  position: relative;
  border-color: rgba(15, 143, 133, 0.18);
}
.guest-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 17px; z-index: 0;
  padding: 1px;
  background: linear-gradient(108deg,
    var(--metal-dark) 0%, var(--metal-mid) 44%, var(--metal-glow) 50%,
    var(--metal-mid) 57%, var(--metal-dark) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; pointer-events: none;
}
.guest-card > * { position: relative; z-index: 1; }

.guest-status {
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 44%, var(--metal-glow) 50%, var(--metal-mid) 57%, var(--metal-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 143, 133, 0.24);
}
.guest-status.amber {
  background: linear-gradient(108deg, #b7801f 0%, var(--gold-mid) 45%, var(--gold-glow) 52%, var(--gold-mid) 60%, #b7801f 100%);
  color: #4a3410; box-shadow: 0 10px 22px rgba(214, 158, 46, 0.26);
}
.guest-status.rose { background: var(--rose); color: #fff; box-shadow: none; }
.guest-status.blue { background: var(--blue); color: #fff; box-shadow: 0 10px 22px rgba(58, 110, 165, 0.22); }

.guest-docs-status {
  display: inline-block; margin-top: 6px;
  font-size: var(--ш-11); font-weight: 600;
  border-radius: 999px; padding: 3px 10px;
  border: 1px solid var(--line);
}
.guest-docs-status.green { color: var(--green); border-color: rgba(46, 138, 92, 0.4); background: rgba(46, 138, 92, 0.08); }
.guest-docs-status.amber { color: var(--amber); border-color: rgba(214, 158, 46, 0.45); background: rgba(214, 158, 46, 0.09); }
.guest-docs-status.blue { color: var(--blue); border-color: rgba(58, 110, 165, 0.4); background: rgba(58, 110, 165, 0.08); }

.primary-btn.shine { box-shadow: 0 14px 30px rgba(15, 143, 133, 0.28); }

.guest-block-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.guest-block-head h3 { margin: 0; }
.guest-note.dim { color: var(--muted); font-size: var(--ш-12-5); }

.guest-thread { display: grid; gap: 10px; margin-top: 12px; }
.guest-thread article {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  background: var(--surface-soft);
}
.guest-msg span, .guest-answer span {
  display: block; font-size: var(--ш-10-5); color: var(--muted); margin-bottom: 3px;
}
.guest-msg p, .guest-answer p { margin: 0; font-size: var(--ш-13); line-height: 1.45; }
.guest-answer {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
}
.guest-answer.pending { opacity: 0.7; }
.guest-thread .answered { border-left: 3px solid var(--green); }
.guest-thread .waiting { border-left: 3px solid var(--amber); }

@media (max-width: 720px) {
  .guest-head { flex-direction: column; }
  .guest-contacts-top { width: 100%; }
  .guest-contact { flex: 1 1 200px; }
}

/* ============================================================
   КАБИНЕТ: логотип, шапка брони, параметры тура
   ============================================================ */
.guest-logo { width: 52px; height: 52px; }
.guest-wordmark .brand-name {
  font-size: var(--ш-24); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05;
}
.guest-wordmark .brand-name span { font-weight: 700; }

/* Шапка брони: две колонки, ничего не съезжает вниз */
.guest-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px; align-items: start;
}
.guest-strip-when { text-align: right; display: grid; gap: 3px; justify-items: end; }

/* Статус документов — метка, а не кнопка */
.guest-docs-status {
  margin-top: 4px; padding: 0; border: 0; background: none;
  font-size: var(--ш-11-5); font-weight: 600;
}
.guest-docs-status::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: currentColor;
}
.guest-docs-status.green { color: var(--green); }
.guest-docs-status.amber { color: var(--amber); }
.guest-docs-status.blue { color: var(--blue); }

/* ---------- Параметры тура ---------- */
.tour-params { display: grid; gap: 14px; }
.param-block {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--surface-soft);
}
.param-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.param-head h4 {
  margin: 0; font-size: var(--ш-11-5); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.param-head > span { font-size: var(--ш-11-5); color: var(--muted); }

.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.param-grid > div {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; background: #fff; min-width: 0;
}
.param-grid span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.param-grid strong { display: block; font-size: var(--ш-13); margin: 2px 0 1px; }
.param-grid small { display: block; font-size: var(--ш-11); color: var(--muted); }

.param-people { display: grid; gap: 8px; }
.param-person {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; background: #fff;
}
.param-person strong { display: block; font-size: var(--ш-13); }
.param-lat {
  display: block; font-size: var(--ш-11-5); font-weight: 600;
  letter-spacing: 0.06em; color: var(--teal); text-transform: uppercase;
}
.param-person small { display: block; font-size: var(--ш-11); color: var(--muted); }
.param-passport span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.param-passport strong { font-size: var(--ш-13); letter-spacing: 0.02em; }
.param-warn { display: block; font-style: normal; font-size: var(--ш-11); color: var(--rose); font-weight: 600; }

.param-flights { display: grid; gap: 10px; }
.param-flight {
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 10px 12px; background: #fff;
}
.param-flight.changed { border-left-color: var(--amber); }
.pf-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; margin-bottom: 9px; }
.pf-head strong { font-size: var(--ш-14); }
.pf-dir {
  font-size: var(--ш-10); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.pf-type {
  font-size: var(--ш-10-5); font-weight: 600; color: var(--blue);
  background: rgba(58, 110, 165, 0.1); border-radius: 999px; padding: 2px 9px;
}
.pf-type.charter { color: var(--amber); background: rgba(214, 158, 46, 0.14); }
.pf-head .row-actions { margin-left: auto; }

.pf-body {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px;
  gap: 10px; align-items: center;
}
.pf-time strong { display: block; font-size: var(--ш-19); font-weight: 700; line-height: 1.1; }
.pf-time small { display: block; font-size: var(--ш-11); color: var(--muted); letter-spacing: 0.04em; }
.pf-body .pf-time:last-of-type { text-align: right; }
.pf-arrow { text-align: center; min-width: 0; }
.pf-arrow span { display: block; font-size: var(--ш-10-5); color: var(--muted); }
.pf-arrow i {
  display: block; height: 1px; background: var(--line);
  position: relative; margin: 5px 0;
}
.pf-arrow i::after {
  content: "✈"; position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%); background: #fff; padding: 0 6px;
  font-size: var(--ш-12); color: var(--teal);
}
.pf-arrow em { display: block; font-style: normal; font-size: var(--ш-10-5); color: var(--amber); }
.pf-route {
  grid-column: 1 / -1; font-size: var(--ш-11-5); color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 7px; margin-top: 3px;
}
.pf-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: var(--ш-12); }
.pf-meta b { font-weight: 600; color: var(--muted); font-size: var(--ш-11); }
.pf-note { margin: 7px 0 0; font-size: var(--ш-12); color: var(--muted); }

.pf-changes {
  margin-top: 9px; padding: 8px 10px;
  border-radius: 8px; background: rgba(214, 158, 46, 0.09);
  border: 1px solid rgba(214, 158, 46, 0.3);
}
.pf-changes > span {
  display: block; font-size: var(--ш-10); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--amber); font-weight: 700; margin-bottom: 4px;
}
.pf-changes p { margin: 0 0 4px; font-size: var(--ш-12); line-height: 1.45; }
.pf-changes p:last-child { margin-bottom: 0; }
/* Подпись под списком переносов: в самом рейсе выше уже стоит
   актуальное время, и человек должен понимать, чему верить. */
.pf-changes-note { margin-top: 6px !important; color: var(--muted); font-size: var(--ш-11) !important; }

@media (max-width: 720px) {
  .guest-strip { grid-template-columns: minmax(0, 1fr); }
  .guest-strip-when { text-align: left; justify-items: start; }
  .param-person { grid-template-columns: minmax(0, 1fr); }
  .pf-body { grid-template-columns: 64px minmax(0, 1fr) 64px; }
}

/* ============================================================
   ЛОГОТИП «ПРЕМИУМ-ТУР»
   Если в assets/logo.png лежит готовый файл — показываем его.
   Если нет — собираем лок-ап: золотое сердце-глобус и надпись.
   ============================================================ */
.guest-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.guest-logo-full { max-height: 58px; width: auto; max-width: 320px; object-fit: contain; }

.guest-lockup { display: none; align-items: center; gap: 12px; }
.guest-lockup.show { display: flex; }
.guest-heart { width: 54px; height: 54px; object-fit: contain; }

.logo-word {
  display: block;
  font-size: var(--ш-27);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: #3c2a22;
}
.logo-slogan {
  display: block;
  font-size: var(--ш-9-5);
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #4a382f;
  margin-top: 2px;
}
.guest-sub {
  font-size: var(--ш-11);
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-left: 2px;
}

/* Шапка кабинета: логотип слева, контакты справа */
.guest-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.guest-contacts-top { justify-content: flex-end; }

/* Размер сердца задаём точнее общего правила .guest-brand img */
.guest-brand .guest-heart { width: 56px; height: 56px; }
.guest-brand .guest-logo-full { width: auto; height: auto; }

@media (max-width: 720px) {
  .guest-head { grid-template-columns: minmax(0, 1fr); }
  .guest-contacts-top { justify-content: flex-start; }
}

/* Надпись логотипа перебивает общие правила .guest-brand strong */
.guest-brand .logo-word {
  font-size: var(--ш-28);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1;
  color: #3c2a22;
}
.guest-brand .logo-slogan {
  font-size: var(--ш-9-5);
  letter-spacing: 0.07em;
  color: #5a463c;
}

/* Шире страница — логотип и контакты помещаются в одну строку */
.guest-page { max-width: 1000px; }
@media (min-width: 900px) {
  .guest-contacts-top { flex-wrap: nowrap; }
}

/* ============================================================
   СТАТУС ТУРА В КАБИНЕТЕ
   Подтверждено и дальше — как главная кнопка CRM: тёмный металл
   с бликом. До подтверждения — светлая метка. Аннуляция — красным.
   ============================================================ */
.guest-status.s-confirmed,
.guest-status.s-paid,
.guest-status.s-docs,
.guest-status.s-done {
  background:
    linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 44%, var(--metal-glow) 50%, var(--metal-mid) 57%, var(--metal-dark) 100%);
  color: #ffffff;
  border: 1px solid var(--sea-deep);
  box-shadow: 0 14px 28px rgba(57, 38, 38, 0.16);
  padding: 6px 16px;
}

/* До подтверждения — спокойная светлая метка */
.guest-status.s-request {
  background: #ffffff;
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 600;
}

/* Аннуляция — розовый из палитры CRM */
.guest-status.s-cancelled {
  background: var(--rose);
  color: #ffffff;
  border: 1px solid var(--rose);
  box-shadow: 0 12px 24px rgba(200, 80, 60, 0.24);
}

/* Туроператор-исполнитель выделен: по закону отвечает он */
.param-block.operator-block {
  border-color: rgba(15, 143, 133, 0.3);
  background: linear-gradient(135deg, rgba(15, 143, 133, 0.05), var(--surface-soft) 65%);
}
.param-grid > div.wide { grid-column: 1 / -1; }
.operator-block .wide strong { font-size: var(--ш-14); }

/* Эквивалент цены в валюте тура */
.pay-cur {
  display: block; font-style: normal;
  font-size: var(--ш-11-5); font-weight: 600; color: var(--teal); margin-top: 2px;
}
.guest-list .pay-cur { display: inline; margin: 0 0 0 4px; font-size: var(--ш-11-5); }
.pay-cur-cell { color: var(--teal); font-weight: 600; }
.rate-note { margin-top: 10px; }
.strip-cur {
  display: block; font-style: normal;
  font-size: var(--ш-11-5); font-weight: 600; color: var(--teal);
}

/* ============================================================
   ЭКРАН ВХОДА
   ============================================================ */
.auth-root { display: none; }
body.auth-mode .auth-root {
  display: block; position: fixed; inset: 0; z-index: 950; overflow: auto;
  background:
    radial-gradient(1100px 460px at 15% -10%, rgba(15, 143, 133, 0.12), transparent 62%),
    radial-gradient(900px 400px at 85% -6%, rgba(229, 196, 101, 0.16), transparent 60%),
    var(--sand-soft, #f7f5f0);
}
body.auth-mode .shell,
body.auth-mode .guest-root { display: none; }

/* ---------- Экран входа целиком помещается ----------

   Карточка стояла посреди страницы через justify-content: center.
   Пока окно высокое — красиво; на ноутбуке с невысоким экраном
   карточка перестаёт помещаться, и центрирование срезает её снизу:
   кнопка «Войти» оказывается за краем, а докрутить до неё нельзя —
   центрированный флекс выносит лишнее за пределы прокрутки.

   Так и вышло на открытии: войти удалось только уменьшив масштаб
   страницы. Теперь то же центрирование делается автоматическими
   полями: есть запас по высоте — карточка посередине, нет запаса —
   поля сжимаются в ноль, содержимое начинается сверху и спокойно
   прокручивается до кнопки. */
.auth-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 16px; padding: 32px 18px;
}
.auth-page > .auth-card { margin-top: auto; }
.auth-page > .auth-foot { margin-bottom: auto; }

/* Невысокий экран — поджимаем отступы, чтобы кнопка была видна
   без прокрутки вовсе. */
@media (max-height: 760px) {
  .auth-page { padding: 14px 18px; gap: 8px; }
  .auth-card { padding: 18px 22px 18px; }
  .auth-brand { margin-bottom: 12px; }
  .auth-brand img { width: 38px; height: 38px; }
  /* Логотип на невысоком экране — самая крупная часть карточки.
     Ограничиваем по высоте: узнаваемость от этого не страдает,
     а кнопка входа поднимается на экран. */
  .auth-brand .auth-logo { max-width: 210px; max-height: 54px; object-fit: contain; }
  .auth-card h1 { font-size: var(--ш-19); }
  .auth-lead { margin-bottom: 12px; }
  .auth-form { gap: 9px; }
  .auth-form input[type="text"],
  .auth-form input[type="password"],
  .auth-form select { height: 36px; }
  .auth-btn { height: 40px; }
  .auth-hint { margin-top: 10px; }
}
.auth-card {
  width: 100%; max-width: 420px;
  border: 1px solid var(--line); border-radius: 18px;
  background: #fff; padding: 28px 30px 26px;
  box-shadow: 0 30px 70px rgba(57, 38, 38, 0.14);
}
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.auth-brand img { width: 48px; height: 48px; object-fit: contain; }
.auth-brand .logo-word { display: block; font-size: var(--ш-22); font-weight: 800; color: #3c2a22; line-height: 1; }
.auth-brand .logo-slogan {
  display: block; font-size: var(--ш-8-5); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5a463c; margin-top: 2px;
}

.auth-card h1 { font-size: var(--ш-21); margin: 0 0 6px; }
.auth-lead { font-size: var(--ш-13); color: var(--muted); line-height: 1.5; margin: 0 0 18px; }

.auth-form { display: grid; gap: 12px; }
.auth-form label > span { display: block; font-size: var(--ш-11-5); color: var(--muted); margin-bottom: 4px; }
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form select {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: var(--ш-14); background: #fff;
}
.auth-form input:focus, .auth-form select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 143, 133, 0.12);
}
.auth-check { display: flex; gap: 8px; align-items: center; font-size: var(--ш-13); }
.auth-check span { color: var(--ink); }
.auth-btn { width: 100%; height: 44px; margin-top: 4px; font-size: var(--ш-14); }
.auth-error {
  margin: 0; font-size: var(--ш-12-5); color: var(--rose); font-weight: 600;
  background: rgba(200, 80, 60, 0.08); border-radius: 8px; padding: 8px 10px;
}
.auth-hint { margin: 16px 0 0; font-size: var(--ш-11-5); color: var(--muted); line-height: 1.5; }
.auth-foot { font-size: var(--ш-11-5); color: var(--muted); }

/* Кнопка выхода рядом с карточкой сотрудника */
.role-box { display: flex; gap: 8px; align-items: center; }
.logout-btn { color: var(--muted); }
.logout-btn:hover { color: var(--rose); border-color: var(--rose); }
.logout-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   Телефон: меню выезжает сбоку, внизу пять частых разделов,
   таблицы разворачиваются в карточки.
   ============================================================ */
.mobile-burger,
.mobile-search-btn,
.mobile-bar,
.drawer-veil { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; overflow-x: hidden; }

  /* ---- выдвижное меню ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 82vw; max-width: 320px;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    overflow-y: auto; padding: 18px 14px 24px;
    box-shadow: 0 0 60px rgba(57, 38, 38, 0.22);
    background: #fff;
  }
  body.drawer-open .sidebar { transform: translateX(0); }
  .sidebar .nav-toggle { display: none; }
  .brand, .team-card { display: flex; }

  .drawer-veil {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(20, 14, 12, 0.42);
  }
  .drawer-veil[hidden] { display: none; }

  .nav-list { gap: 2px; }
  .nav-item { height: 46px; font-size: var(--ш-14-5); }

  /* ---- шапка в одну строку ---- */
  .main { padding: 0 14px 84px; }
  .topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    margin: 0 -14px 14px; padding: 10px 14px;
    background: rgba(250, 249, 246, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .mobile-burger {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 11px;
    border: 1px solid var(--line); background: #fff; cursor: pointer;
  }
  .mobile-burger svg { width: 20px; height: 20px; fill: var(--ink); }

  .topbar-left { min-width: 0; }
  .topbar-left .today { display: none; }
  .topbar-left h1 {
    font-size: var(--ш-17); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  .topbar-actions { gap: 6px; flex-wrap: nowrap; }
  .mobile-search-btn { display: grid; place-items: center; }
  .topbar-actions .search { display: none; }
  .topbar-new { display: none; }
  .role-chip { padding: 0; border: 0; background: none; }
  .role-chip span:not(.role-avatar) { display: none; }
  .icon-btn, .logout-btn { width: 40px; height: 40px; }

  /* поиск разворачивается по кнопке */
  body.search-open .topbar { grid-template-columns: 42px minmax(0, 1fr) auto; }
  body.search-open .topbar-actions .search {
    display: flex; position: absolute; left: 14px; right: 14px; top: 58px;
    background: #fff; z-index: 5; height: 44px;
  }
  body.search-open .topbar { padding-bottom: 56px; }

  /* ---- нижняя панель ---- */
  .mobile-bar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-tab {
    display: grid; justify-items: center; gap: 2px;
    border: 0; background: none; padding: 6px 2px; cursor: pointer;
    font-family: inherit; font-size: var(--ш-10); color: var(--muted);
    min-height: 48px;
  }
  .mobile-tab svg { width: 21px; height: 21px; fill: currentColor; }
  .mobile-tab.active { color: var(--teal); font-weight: 600; }
  .mobile-tab span {
    max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }

  .ai-float { bottom: 78px; right: 14px; }

  /* ---- всё в одну колонку ---- */
  .module-layout, .reports-layout, .finance-layout, .tasks-layout,
  .knowledge-layout, .chat-layout, .service-layout, .bookings-layout,
  .request-layout, .request-card-layout, .booking-detail-layout,
  .booking-workspace, .tourist-columns, .tourist-card-layout,
  .metrics-grid, .booking-detail-grid, .staff-grid, .settings-grid,
  .workspace-grid, .pl-grid, .cal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .metrics-grid { gap: 8px; }

  .panel { padding: 14px; border-radius: 14px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .head-actions { width: 100%; flex-wrap: wrap; }
  .head-actions .secondary-btn, .head-actions .primary-btn { flex: 1 1 auto; }

  /* ---- фильтры и формы ---- */
  .booking-criteria { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .booking-criteria .booking-search-field { grid-column: span 1; }
  .edit-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  input, select, textarea { font-size: var(--ш-16); }
  .field-cell input, .field-cell select, .form-field input, .form-field select { height: 44px; }
  .primary-btn, .secondary-btn { height: 42px; }

  /* ---- таблицы разворачиваются в карточки ---- */
  .table-wrap { overflow-x: visible; }
  .table-wrap table, .cal-table, .guest-table { display: block; width: 100%; }
  .table-wrap thead, .cal-table thead, .guest-table thead { display: none; }
  .table-wrap tbody, .cal-table tbody, .guest-table tbody { display: block; }
  .table-wrap tbody tr, .cal-table tbody tr, .guest-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px; background: #fff;
  }
  .table-wrap tbody td, .cal-table tbody td, .guest-table tbody td {
    display: grid; grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
    gap: 10px; align-items: baseline;
    border: 0; padding: 4px 0; text-align: left;
  }
  .table-wrap tbody td::before,
  .cal-table tbody td::before,
  .guest-table tbody td::before {
    content: attr(data-label);
    font-size: var(--ш-10-5); color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .table-wrap tbody td:empty { display: none; }
  .table-wrap tfoot { display: block; }
  .table-wrap tfoot tr { display: block; border-top: 2px solid var(--line); padding-top: 8px; }
  .table-wrap tfoot td { display: block; }

  /* ---- список броней: 13 колонок в карточку ---- */
  .booking-table { display: block; }
  .booking-head, .booking-total-row { display: none; }
  .booking-table .booking-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px; border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; margin-bottom: 8px; background: #fff; text-align: left;
  }
  .booking-table .booking-row > span:first-child,
  .booking-table .booking-row > span:nth-child(3) { grid-column: 1 / -1; }

  /* ---- карточки и списки ---- */
  .staff-head, .dir-head {
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    gap: 10px;
  }
  .staff-head .staff-fig, .dir-head .dir-fig { display: none; }
  .task-list-head { display: none; }
  .task-line { grid-template-columns: 26px 30px minmax(0, 1fr) 24px; }
  .task-line-main { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .task-when { display: flex; gap: 8px; align-items: baseline; }
  .task-entity, .task-owner { font-size: var(--ш-11); color: var(--muted); }

  /* ---- модальные окна на весь экран ---- */
  .modal {
    position: fixed; inset: 0; max-width: 100%; max-height: 100%;
    width: 100%; height: 100%; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .modal-body { flex: 1 1 auto; overflow-y: auto; }
  .modal-foot {
    position: sticky; bottom: 0; background: #fff;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .modal-foot .primary-btn, .modal-foot .secondary-btn { flex: 1 1 auto; }

  /* ---- прочее ---- */
  .process-strip { display: none; }
  .kanban { overflow-x: auto; }
  .cal-grid { font-size: var(--ш-12); }
  .report-grid, .profit-metrics, .conversion-break,
  .decomp-line, .buy-summary, .guest-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-list-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-filter { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Совсем узкие экраны */
@media (max-width: 420px) {
  .main { padding: 0 10px 84px; }
  .topbar { margin: 0 -10px 12px; padding: 10px; }
  .panel { padding: 12px; }
  .report-grid, .profit-metrics, .conversion-break,
  .decomp-line, .buy-summary, .guest-pay, .booking-list-summary,
  .metrics-grid { grid-template-columns: minmax(0, 1fr); }
  .booking-table .booking-row { grid-template-columns: minmax(0, 1fr); }
  .mobile-tab span { font-size: var(--ш-9); }
  h1, .topbar-left h1 { font-size: var(--ш-16); }
}

/* Планшет: меню остаётся, но уже */
@media (min-width: 901px) and (max-width: 1180px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .nav-item { font-size: var(--ш-13); }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ: перебиваем старые правила узкого экрана
   ============================================================ */
@media (max-width: 900px) {
  /* Показатели были лентой с прокруткой — делаем плитками */
  .shell .metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    gap: 8px;
  }
  .shell .metric-card { min-width: 0; }

  /* Строка задачи: дата, название и метки друг под другом */
  .task-list .task-line .task-line-main,
  .staff-body .task-line .task-line-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
  }
  .task-line .task-when { display: flex; gap: 8px; align-items: baseline; }
  .task-line .task-when strong { display: inline; font-size: var(--ш-12-5); }
  .task-line .task-name { font-size: var(--ш-13-5); }
  .task-line .task-marks { gap: 4px; }
  .task-line .task-entity, .task-line .task-owner { font-size: var(--ш-11); color: var(--muted); }
}

@media (max-width: 480px) {
  .shell .metrics-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Меню в выдвижной панели идёт столбиком, а не лентой */
@media (max-width: 900px) {
  .sidebar .nav-list {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    gap: 2px;
    padding: 0;
    margin: 0;
  }
  .sidebar .nav-item {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 10px;
  }
  .sidebar .nav-item .nav-label { display: inline; }
  .sidebar .brand { display: flex; margin-bottom: 6px; }
  .sidebar .team-card { display: block; margin-top: auto; }
  .sidebar { gap: 14px; }
}

/* Таблицы-карточки не должны распирать экран */
@media (max-width: 900px) {
  .table-wrap tbody tr, .cal-table tbody tr, .guest-table tbody tr,
  .plan-table tbody tr { width: 100%; min-width: 0; }
  .table-wrap tbody td, .cal-table tbody td, .guest-table tbody td {
    min-width: 0; white-space: normal; word-break: break-word;
  }
  .table-wrap td small, .cal-table td small { display: block; }
  .settle-actions, .plan-table .settle-actions {
    display: flex !important; gap: 6px; flex-wrap: wrap; padding-top: 6px;
  }
  .settle-actions::before { display: none; }
  .icon-line { width: 34px; height: 34px; }
}

/* На телефоне у таблиц не может быть минимальной ширины:
   они разворачиваются в карточки и должны влезать в экран */
@media (max-width: 900px) {
  .table-wrap table,
  .table-wrap .plan-table,
  .table-wrap .cal-table,
  .table-wrap .settle-table,
  .table-wrap .recon-table,
  .settle-table,
  .guest-table {
    min-width: 0;
    width: 100%;
  }
  .table-wrap { overflow-x: visible; padding-bottom: 0; }
}

/* Внутренности ячейки идут в колонку значения, а не под подпись */
@media (max-width: 900px) {
  .table-wrap tbody td > *,
  .cal-table tbody td > *,
  .guest-table tbody td > * { grid-column: 2; }

  .table-wrap tbody td::before,
  .cal-table tbody td::before,
  .guest-table tbody td::before { grid-column: 1; grid-row: 1; }

  /* Кнопки действий — строкой под данными */
  .table-wrap tbody td.settle-actions,
  .plan-table tbody td.settle-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line);
  }
  .table-wrap tbody td.settle-actions > * { grid-column: auto; }
  .table-wrap tbody td.settle-actions::before { display: none; }
}

@media (max-width: 900px) {
  /* в таблице ячейка действий была узкой колонкой — на телефоне это строка */
  .table-wrap tbody td.settle-actions,
  .plan-table tbody td.settle-actions {
    width: auto; text-align: left; white-space: normal;
  }
  .table-wrap tbody td.settle-actions .icon-line { width: 36px; height: 36px; }
}

/* Список броней и заявок на телефоне — карточки с подписями */
@media (max-width: 900px) {
  .booking-table .booking-head,
  .booking-table .booking-total-row,
  .request-list .request-head,
  .request-list .request-total { display: none; }

  .booking-table .booking-row,
  .request-list .request-row {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 0; border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; margin-bottom: 8px; background: #fff; text-align: left;
    width: 100%; min-width: 0;
  }
  .booking-table .booking-row > span,
  .request-list .request-row > span {
    display: grid; grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
    gap: 10px; align-items: baseline; padding: 3px 0; min-width: 0;
  }
  .booking-table .booking-row > span::before,
  .request-list .request-row > span::before {
    content: attr(data-label);
    font-size: var(--ш-10-5); color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .booking-table .booking-row > span > *,
  .request-list .request-row > span > * { grid-column: 2; }
  .booking-table .booking-row > span:empty,
  .request-list .request-row > span:empty { display: none; }
  .booking-table .booking-row > span:first-child { border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 5px; }
  .request-list { min-width: 0; overflow-x: visible; }
}

/* ---------- Карточка брони на телефоне ----------

   Было так: одиннадцать полей, у каждого подпись сверху и
   значение снизу — двадцать две строки на одну бронь. Карточка
   не помещалась в экран целиком, и список превращался в ленту,
   по которой нельзя пробежать глазами.

   Стало: две колонки и мелкий шрифт, как во всём остальном
   интерфейсе. Номер договора и заказчик — во всю ширину, они
   главные; остальное парами. Одна бронь — один взгляд. */
@media (max-width: 900px) {
  .booking-table .booking-row,
  .request-list .request-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px; padding: 11px 12px;
  }
  .booking-table .booking-row > span,
  .request-list .request-row > span {
    display: block; padding: 0; min-width: 0;
  }
  .booking-table .booking-row > span::before,
  .request-list .request-row > span::before {
    display: block; margin-bottom: 0; font-size: var(--ш-9-5); line-height: 1.3;
  }
  .booking-table .booking-row > span > *,
  .request-list .request-row > span > * { grid-column: auto; }
  .booking-table .booking-row strong,
  .request-list .request-row strong {
    font-size: var(--ш-12-5); margin: 0; line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .booking-table .booking-row small,
  .request-list .request-row small {
    display: block; font-size: var(--ш-10-5); line-height: 1.3; color: var(--muted);
    overflow-wrap: anywhere;
  }
  /* Номер договора и заказчик — во всю ширину: по ним ищут глазами */
  .booking-table .booking-row > span:first-child,
  .booking-table .booking-row > span:nth-child(5),
  .request-list .request-row > span:first-child { grid-column: 1 / -1; }
  .booking-table .booking-row > span:first-child {
    border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 1px;
  }
  .booking-table .booking-row > span:first-child strong { font-size: var(--ш-14); }
  /* Плашка статуса не должна распирать колонку */
  .booking-table .booking-row .pill {
    font-size: var(--ш-10); padding: 2px 7px; white-space: normal; text-align: left;
  }
}

@media (max-width: 900px) {
  /* строка-шапка списка на телефоне не нужна: подписи в каждой карточке */
  .booking-table .booking-row.booking-head,
  .booking-table .booking-row.booking-total-row,
  .request-list .request-row.request-head,
  .request-list .request-row.request-total { display: none !important; }
}

/* Кабинет туриста внутри CRM не должен быть шире рабочей области */
.view .guest-page { max-width: 100%; padding-left: 0; padding-right: 0; }
@media (max-width: 1100px) {
  .guest-page { max-width: 100%; }
  .guest-head { grid-template-columns: minmax(0, 1fr); }
  .guest-contacts-top { justify-content: flex-start; }
}

/* Таблица оплат в кабинете прокручивается внутри карточки, а не распирает её */
.guest-block { min-width: 0; }
.guest-table { display: block; overflow-x: auto; max-width: 100%; }
.guest-table thead, .guest-table tbody { display: table; width: 100%; min-width: 420px; }
@media (max-width: 900px) {
  .guest-table thead, .guest-table tbody { min-width: 0; display: block; }
}

.guest-block .guest-table { width: 100%; min-width: 0; max-width: 100%; }

/* Модальное окно на телефоне — на весь экран, без сдвига по центру */
@media (max-width: 900px) {
  .modal {
    top: 0; left: 0; transform: none;
    width: 100%; max-width: 100%;
    height: 100%; max-height: 100%;
    border-radius: 0;
  }
  .modal-head { padding: 14px 16px 12px; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
}

/* Аватары в контактах не сжимаются */
.guest-contact .role-avatar,
.guest-manager .role-avatar,
.celebrations .role-avatar { flex: 0 0 auto; }

/* Фирменный логотип на экране входа */
.auth-brand { display: block; margin-bottom: 20px; }
.auth-logo { width: 100%; max-width: 300px; height: auto; display: block; }
.auth-logo.mark-only { width: 56px; }

/* Логотип на входе перебивает общее правило .auth-brand img */
.auth-brand .auth-logo { width: 100%; max-width: 290px; height: auto; }
.auth-brand .auth-logo.mark-only { width: 56px; height: 56px; }

/* ============================================================
   ЛОГОТИП В МЕНЮ И ЗАКРЕПЛЁННОЕ МЕНЮ
   ============================================================ */
.brand { display: block; }
.brand-logo { width: 100%; max-width: 210px; height: auto; display: block; }
.brand-logo.hidden { display: none; }
.brand .brand-mark { display: none; }
.brand-sub {
  display: block; font-size: var(--ш-10-5); color: var(--muted);
  margin-top: 4px; letter-spacing: 0.03em;
}
/* когда меню свёрнуто — только сердце */
.nav-collapsed .brand-logo, .nav-collapsed .brand-sub { display: none; }
.nav-collapsed .brand .brand-mark { display: grid; }

/* Меню не уезжает при прокрутке страницы */
@media (min-width: 901px) {
  .sidebar {
    position: sticky; top: 0;
    height: 100vh; overflow-y: auto; overflow-x: hidden;
  }
}

/* Строка задачи в карточке сотрудника не наезжает на метки */
@media (max-width: 1400px) {
  .staff-body .task-line-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .staff-body .task-line-main > span { grid-column: 1; }
  .staff-body .task-when { display: flex; gap: 8px; align-items: baseline; }
  .staff-body .task-marks { flex-wrap: wrap; }
}

/* Метки у имени сотрудника не разрываются на две строки */
.staff-name .fired-badge { white-space: nowrap; }
.staff-name strong { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* В карточке сотрудника у строки задачи три части, а не четыре:
   без этого текст задачи сжимался в узкую колонку */
.staff-body .task-line { grid-template-columns: 26px minmax(0, 1fr) 24px; }
.staff-body .task-line .task-line-main { min-width: 0; }

/* Значок связи с сервером */
.sync-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ш-11); color: var(--muted); white-space: nowrap;
}
.sync-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}
.sync-badge.off { color: var(--rose); font-weight: 600; }
.sync-badge.off::before { background: var(--rose); }
@media (max-width: 900px) { .sync-badge { font-size: 0; gap: 0; } }

/* ---------- Длинные списки ----------
   В рабочей базе агентства десятки тысяч записей. Показываем их
   порциями, а внизу — сколько уже видно и кнопка «показать ещё». */
.more-row td,
.booking-row.more-row,
.request-row.more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  justify-content: center;
  background: transparent;
}
.more-row small { color: var(--muted); }
.lane-more {
  width: 100%;
  margin-top: 8px;
  font-size: var(--ш-13);
}

/* Поиск по всей базе туристов: список большой, глазами не найти */
.tourist-search {
  padding: 0 20px 14px;
}
.tourist-search label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tourist-search span {
  font-size: var(--ш-12);
  color: var(--muted);
}
.tourist-search input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--ш-14);
}

/* ---------- Поле пароля с кнопкой «показать» ----------
   Пароль набирают вслепую и ошибаются в одном символе,
   а понять, где именно, невозможно. Даём подсмотреть. */
.pass-wrap {
  position: relative;
  display: block;
}
.pass-wrap input {
  width: 100%;
  padding-right: 44px;
}
.pass-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pass-eye:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); }
.pass-eye:focus-visible { outline: 2px solid var(--metal-mid); outline-offset: 2px; }
/* Перечёркнутый глаз, пока пароль скрыт; открытый — когда виден */
.pass-eye .eye-slash { opacity: 1; }
.pass-eye.shown .eye-slash { opacity: 0; }
.auth-form .pass-field { display: block; }

/* Полоска на экране загрузки базы: она едет по сети секунд двадцать,
   и человеку надо видеть, что система жива, а не зависла. */
.load-bar {
  margin-top: 18px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.load-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--metal-mid), var(--metal-glow));
  animation: load-run 1.4s ease-in-out infinite;
}
@keyframes load-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Нажатая кнопка входа должна быть видна: пока идёт проверка,
   она гаснет и пишет, что происходит. */
.auth-btn:disabled {
  opacity: 0.65;
  cursor: progress;
}
.auth-btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Подпись под операцией: кто подтвердил её своим паролем.
   Видно и в кассе, и в карточке счёта — это след ответственности. */
.signed-line {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: var(--ш-12);
}
.signed-line::before {
  content: "✓ ";
  font-weight: 700;
}

/* ---------- Наши юрлица ----------
   У агентства их может быть несколько, и каждое обслуживает
   свои подразделения. Карточки должны читаться с одного взгляда. */
.entity-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 12px 0;
}
.entity-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface);
}
.entity-card.main { border-color: var(--metal-mid); }
.entity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.entity-card p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--ш-13);
}
.entity-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 24px;
}
.entity-depts em {
  color: var(--muted);
  font-size: var(--ш-12);
}

/* Состояние почты в настройках: работает она или ещё нет */
.mail-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.mail-state span {
  color: var(--muted);
  font-size: var(--ш-13);
}

/* Хорошая новость на экране входа — не ошибка, и цвет у неё другой */
.auth-note {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 111, 115, 0.09);
  color: var(--green);
  font-size: var(--ш-13);
  line-height: 1.45;
}

/* ---------- Раздел «Почта» ----------
   Слева список писем, справа раскрытое письмо — как в обычной почте.
   Свежие сверху, непрочитанные заметны, отметки для действий пачкой. */
.mail-layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.mail-side { display: flex; flex-direction: column; min-width: 0; }
.mail-read { min-width: 0; }

.mail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.mail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--choco-soft);
  font-size: var(--ш-13);
  cursor: pointer;
}
.mail-tab i { font-style: normal; font-size: var(--ш-11); color: var(--muted); }
.mail-tab.on {
  background: var(--metal-dark);
  border-color: var(--metal-dark);
  color: #fff;
}
.mail-tab.on i { color: rgba(255, 255, 255, 0.7); }

.mail-search { display: block; margin-bottom: 8px; }
.mail-search input { width: 100%; }

.mail-warn {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(199, 164, 90, 0.14);
  color: var(--choco);
  font-size: var(--ш-13);
  line-height: 1.45;
}

/* Полоса действий над отмеченными письмами */
.mail-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--ш-13);
  color: var(--muted);
}
.mail-bulk.on { color: var(--ink); }
.mail-check-all { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mail-bulk-actions { display: flex; gap: 4px; }

/* Разделитель по дням */
.mail-day {
  padding: 12px 12px 6px;
  font-size: var(--ш-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.mail-list {
  display: flex;
  flex-direction: column;
  max-height: 64vh;
  overflow-y: auto;
}
.mail-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  border-radius: 10px;
  border: 1px solid transparent;
}
.mail-row:hover { background: var(--surface-soft); }
.mail-row.on { background: var(--surface-soft); border-color: var(--metal-mid); }
.mail-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 13px;
  cursor: pointer;
}
.mail-row-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px 10px 2px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mail-row-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--ш-13);
}
.mail-row-top b {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row-top i { font-style: normal; color: var(--muted); font-size: var(--ш-12); flex: none; }
.mail-row-subject {
  font-size: var(--ш-13);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row-note {
  font-size: var(--ш-12);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row-tag {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(15, 111, 115, 0.1);
  color: var(--green);
  font-size: var(--ш-11);
}
/* Непрочитанное выделяем жирным и точкой — как в почте */
.mail-row.new .mail-row-top b,
.mail-row.new .mail-row-subject { font-weight: 700; }
.mail-row.new .mail-row-top b::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--metal-glow);
  vertical-align: middle;
}

.mail-meta {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 12px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.mail-meta span { display: block; font-size: var(--ш-12); color: var(--muted); }
.mail-meta strong { font-weight: 600; font-size: var(--ш-14); }
/* Список вложений живёт во всю ширину: файлов бывает четыре, и в
   узкой колонке они рвутся посередине имени. */
.mail-meta .wide { grid-column: 1 / -1; }
/* Ящики агентства — строкой над вкладками: по ним выбирают, чью
   переписку смотреть, и это первый вопрос, а не последний. */
.mail-boxes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mail-meta .wide strong { font-weight: 500; line-height: 1.5; }

.mail-text {
  font-size: var(--ш-14);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 52vh;
  overflow-y: auto;
}
.mail-foot { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }

/* Короткий список писем в карточке брони */
.mail-mini { display: flex; flex-direction: column; gap: 2px; }
.mail-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: var(--ш-13);
  cursor: pointer;
}
.mail-mini-row:hover { background: var(--surface-soft); }
.mail-mini-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-mini-row span { color: var(--choco-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-mini-row i { font-style: normal; color: var(--muted); font-size: var(--ш-12); }

@media (max-width: 1100px) {
  .mail-layout { grid-template-columns: minmax(0, 1fr); }
  .mail-list { max-height: none; }
}

/* Подсказка о том, что в памяти только свежие записи, а остальное — в архиве */
.window-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: var(--ш-13);
  color: var(--choco-soft);
}

/* Пояснение под фильтрами: что именно сейчас показано в списке */
.list-hint {
  margin: 10px 0 0;
  font-size: var(--ш-13);
  line-height: 1.45;
}

.mail-loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--choco-soft);
  font-size: var(--ш-13);
}
.mail-loading strong { color: var(--ink); font-size: var(--ш-15); }
.mail-loading span { line-height: 1.45; }
/* Письмо показываем в отдельной защищённой рамке — как в почте.
   Внутри неё ничего не выполняется и до системы не достаёт. */
.mail-frame {
  width: 100%;
  min-height: 420px;
  height: 52vh;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.mail-images-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: var(--ш-13);
  color: var(--choco-soft);
}
.mail-text-primary { min-height: 180px; padding: 16px; background: #fff; font-size: 15px; line-height: 1.7; }
.mail-view-actions { margin-top: 10px; }
.mail-text-plain {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

/* Кого позвали к письму */
.mail-called {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(15, 111, 115, 0.08);
  font-size: var(--ш-13);
  color: var(--green);
}
.mail-called-one em { font-style: normal; color: var(--muted); }

/* Фотография сотрудника */
.role-avatar.has-photo { padding: 0; overflow: hidden; }
.role-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.staff-photo {
  width: 72px; height: 72px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.staff-photo.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--ш-22);
  font-weight: 600;
}
.signed-hint { display: block; color: var(--muted); font-size: var(--ш-11); margin-bottom: 4px; }
.signed-line { margin-top: 6px; font-size: var(--ш-12); color: var(--green); }

/* Упоминания в командном чате */
.chat-people {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.chat-people-label { font-size: var(--ш-12); color: var(--muted); }
.chat-person {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--choco-soft);
  font-size: var(--ш-12);
  cursor: pointer;
}
.chat-person:hover { border-color: var(--metal-mid); color: var(--ink); }
.chat-person.ai { border-style: dashed; }
.message .mention { color: var(--metal-mid); font-weight: 600; }
.message.mentions-me {
  border-left: 3px solid var(--metal-glow);
  background: rgba(43, 194, 199, 0.07);
}

/* ---------- Зоны комиссии ----------
   От процента комиссии зависит, зарабатывает бронь или проедает.
   Цвет должен читаться мгновенно, а рядом — слово, почему он такой. */
:root {
  --zone-bad: #7d1f2e;    /* бордовый: нерентабельно */
  --zone-low: #b8402f;    /* красный: критично низко */
  --zone-mid: #b8860b;    /* жёлтый: средне */
  --zone-good: #0f6f73;   /* зелёный: отлично */
}
.strip-commission {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: var(--ш-13);
}
.strip-commission .zone-name {
  font-style: normal;
  font-size: var(--ш-11);
  opacity: 0.85;
}
.strip-commission.zone-bad  { color: var(--zone-bad);  background: rgba(125, 31, 46, 0.09); }
.strip-commission.zone-low  { color: var(--zone-low);  background: rgba(184, 64, 47, 0.09); }
.strip-commission.zone-mid  { color: var(--zone-mid);  background: rgba(184, 134, 11, 0.11); }
.strip-commission.zone-good { color: var(--zone-good); background: rgba(15, 111, 115, 0.09); }
.commission-warn { font-style: normal; font-weight: 700; }

.cost-line.result.zone-bad strong,
.cost-line.result.zone-bad .cost-pct  { color: var(--zone-bad); }
.cost-line.result.zone-low strong,
.cost-line.result.zone-low .cost-pct  { color: var(--zone-low); }
.cost-line.result.zone-mid strong,
.cost-line.result.zone-mid .cost-pct  { color: var(--zone-mid); }
.cost-line.result.zone-good strong,
.cost-line.result.zone-good .cost-pct { color: var(--zone-good); }

.cost-alert {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: var(--ш-13);
  line-height: 1.5;
  background: var(--surface-soft);
  border-left: 3px solid var(--line);
}
.cost-alert.zone-bad  { border-left-color: var(--zone-bad);  background: rgba(125, 31, 46, 0.06); }
.cost-alert.zone-low  { border-left-color: var(--zone-low);  background: rgba(184, 64, 47, 0.06); }
.cost-alert.zone-mid  { border-left-color: var(--zone-mid);  background: rgba(184, 134, 11, 0.07); }
.cost-alert.zone-good { border-left-color: var(--zone-good); background: rgba(15, 111, 115, 0.06); }

/* Линейка зон: где мы сейчас */
.zone-scale {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.zone-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  opacity: 0.55;
}
.zone-step b { font-size: var(--ш-12); font-weight: 600; }
.zone-step i { font-style: normal; font-size: var(--ш-11); color: var(--muted); }
.zone-step.on { opacity: 1; border-width: 2px; }
.zone-step.zone-bad.on  { border-color: var(--zone-bad); }
.zone-step.zone-low.on  { border-color: var(--zone-low); }
.zone-step.zone-mid.on  { border-color: var(--zone-mid); }
.zone-step.zone-good.on { border-color: var(--zone-good); }

/* ---------- Правый столбец карточки брони ----------
   Он был привязан к высоте левого: чтобы долистать разбор ИИ,
   приходилось сначала прокручивать всю бронь. Делаем его липким
   и со своей прокруткой — читается независимо. */
@media (min-width: 1101px) {
  .booking-right {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  /* Полоса прокрутки не должна лезть в глаза */
  .booking-right::-webkit-scrollbar { width: 8px; }
  .booking-right::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
  }
  .booking-right::-webkit-scrollbar-track { background: transparent; }
}

/* Шапка брони: два номера и два ответственных человека */
.strip-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.strip-no.second {
  font-size: var(--ш-13);
  font-weight: 500;
  color: var(--muted);
}
.strip-people {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.strip-people .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.strip-people .who small {
  font-size: var(--ш-11);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip-people .who strong { font-size: var(--ш-13); font-weight: 600; }

/* Плашка «Внимание!» — нажимается и показывает, что именно не так */
.attention-pill {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.attention-pill .attention-more {
  font-style: normal;
  font-size: var(--ш-11);
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.attention-pill:hover .attention-more { opacity: 1; }

.attention-list { display: flex; flex-direction: column; gap: 10px; }
.attention-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--surface-soft);
  border-left: 3px solid var(--line);
}
.attention-item.bad  { border-left-color: var(--rose); }
.attention-item.warn { border-left-color: var(--amber); }
.attention-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--ш-13);
  background: var(--surface);
}
.attention-item.bad .attention-mark  { color: var(--rose); }
.attention-item.warn .attention-mark { color: var(--amber); }
.attention-item strong { font-size: var(--ш-14); }
.attention-item p { margin: 3px 0 0; font-size: var(--ш-13); color: var(--choco-soft); line-height: 1.45; }
.attention-act {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: var(--ш-12);
  color: var(--metal-mid);
}
.attention-ok { margin-top: 14px; color: var(--muted); font-size: var(--ш-12); }

/* Турист в брони: карточка плюс кнопка статуса паспорта */
.tourist-mini-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}
/* Карточка внутри обёртки тянется на всю ширину ячейки: иначе в
   списке связей карточки были разной ширины — по длине имени. */
.tourist-mini-wrap > .tourist-mini { width: 100%; }
.tourist-mini-wrap > .row-actions { padding: 0 2px; }
.tourist-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Что забронировано: пакет, отель, авиа или всё вместе */
.kind-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 2px;
}
.kind-btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--choco-soft);
  font-size: var(--ш-13);
  cursor: pointer;
}
.kind-btn:hover:not(:disabled) { border-color: var(--metal-mid); color: var(--ink); }
.kind-btn.on {
  background: var(--metal-dark);
  border-color: var(--metal-dark);
  color: #fff;
}
.kind-btn:disabled { cursor: default; opacity: 0.75; }

/* Приход и расход в кассе: перепутать их — получить неверный остаток */
.dir-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--ш-12);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.dir-mark.in  { background: rgba(15, 111, 115, 0.13); color: var(--green); }
.dir-mark.out { background: rgba(184, 107, 88, 0.14); color: var(--rose); }
.dir-method,
.dir-share {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--ш-11);
  color: var(--muted);
}
.settle-row.row-in  td:first-child { box-shadow: inset 3px 0 0 rgba(15, 111, 115, 0.5); }
.settle-row.row-out td:first-child { box-shadow: inset 3px 0 0 rgba(184, 107, 88, 0.5); }

/* Операция, внесённая позже, чем случилась */
.back-dated {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(199, 164, 90, 0.18);
  color: #8a6a1f;
  font-size: var(--ш-11);
}

/* Код СБП в настройках и печатный счёт */
.sbp-qr {
  width: 132px; height: 132px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 6px;
}
.invoice-doc .print-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.invoice-doc .print-table td { padding: 7px 10px; border: 1px solid var(--line); font-size: var(--ш-13); }
.invoice-doc .print-table td:first-child { width: 38%; color: var(--muted); }
.invoice-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid var(--metal-dark);
  border-radius: 10px;
  margin-bottom: 14px;
}
.invoice-total span { color: var(--muted); font-size: var(--ш-13); }
.invoice-total strong { font-size: var(--ш-22); }
.invoice-total em { width: 100%; font-style: normal; font-size: var(--ш-12); color: var(--muted); }
.invoice-note { font-size: var(--ш-12); color: var(--muted); line-height: 1.5; }
/* Дата, на которую верна рублёвая сумма. Стоит сразу под суммой и
   не приглушена: это не сноска, а условие оплаты. */
.invoice-valid {
  border-left: 3px solid var(--ink); padding: 8px 0 8px 12px;
  margin: 14px 0; font-size: var(--ш-12-5); line-height: 1.55; color: var(--ink);
}
.invoice-valid strong { display: block; margin-bottom: 3px; }
.money-actions { margin-bottom: 14px; }

/* Статус оплаты: его не выбирают, он считается сам */
.strip-status.readonly {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pay-state {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--ш-13);
  font-weight: 600;
  border: 1px solid currentColor;
}
.pay-state.green { color: var(--green); background: rgba(15, 111, 115, 0.09); }
.pay-state.amber { color: #8a6a1f; background: rgba(199, 164, 90, 0.16); }
.pay-state.rose  { color: var(--rose); background: rgba(184, 107, 88, 0.11); }
.pay-state.blue  { color: var(--blue); background: rgba(15, 167, 178, 0.1); }
.pay-hint { font-style: normal; font-size: var(--ш-11); color: var(--muted); }

/* Дебиторка: сколько туристы должны доплатить в ближайший месяц */
.debt-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(15, 111, 115, 0.07), rgba(15, 111, 115, 0.02));
}
.debt-tile.has-overdue { border-color: rgba(184, 107, 88, 0.5); }
.debt-tile span { display: block; font-size: var(--ш-12); color: var(--muted); }
.debt-tile strong { display: block; font-size: var(--ш-26); font-weight: 700; line-height: 1.2; }
.debt-tile em { font-style: normal; font-size: var(--ш-12); color: var(--muted); }
.debt-overdue strong { color: var(--rose); font-size: var(--ш-20); }
.debt-ok span { color: var(--green); }

/* Ссылки на записи прямо в уведомлениях */
.note-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.note-link {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--metal-mid);
  font-size: var(--ш-12);
  cursor: pointer;
}
.note-link:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.note-more { align-self: center; font-size: var(--ш-12); color: var(--muted); }

/* Название записи в боковых панелях — ссылка, а не просто текст */
.ai-link-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--ш-14);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
}
.ai-link-title:hover { color: var(--metal-mid); text-decoration: underline; text-underline-offset: 2px; }

/* Из чего складывается дебиторка */
.debt-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.debt-row {
  display: grid;
  grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 92px 110px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: var(--ш-13);
  cursor: pointer;
}
.debt-row:hover { background: rgba(255, 255, 255, 0.6); }
.debt-row b { font-weight: 600; }
.debt-row span { color: var(--choco-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-row i { font-style: normal; color: var(--muted); font-size: var(--ш-12); }
.debt-row strong { text-align: right; }
.debt-row.late i,
.debt-row.late strong { color: var(--rose); }
.debt-more { font-size: var(--ш-12); color: var(--muted); padding: 4px 8px; }

/* Выбор сопровождающего прямо в шапке брони */
.who-select {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px 2px 0;
  font-size: var(--ш-13);
  font-weight: 600;
  color: var(--ink);
  border-radius: 6px;
  max-width: 100%;
}
.who-select:hover { border-color: var(--line); background: var(--surface); }

/* Микрофон в полях комментариев: длинное проще наговорить */
.voice-wrap { position: relative; display: block; }
.voice-wrap textarea { width: 100%; padding-right: 42px; }
.voice-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.voice-btn:hover { color: var(--ink); border-color: var(--metal-mid); }
.voice-btn.listening {
  color: #fff;
  background: var(--rose);
  border-color: var(--rose);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 107, 88, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(184, 107, 88, 0); }
}

/* Плашка платежей туроператорам — рядом с дебиторкой, но своим цветом */
.debt-tile.operator {
  background: linear-gradient(135deg, rgba(184, 107, 88, 0.08), rgba(184, 107, 88, 0.02));
}
.debt-toggle {
  width: 100%;
  text-align: left;
  margin-top: 10px;
  padding: 0;
}

/* Числовые столбцы в списке броней: выравниваем по правому краю,
   так суммы читаются столбиком и занимают меньше места. */
.booking-table .booking-row > span.num {
  text-align: right;
  align-items: flex-end;
}
.booking-table .booking-row > span.num small { text-align: right; }
/* Заголовок числового столбца — тоже вправо */
.booking-table .booking-head > span:nth-child(9),
.booking-table .booking-head > span:nth-child(10),
.booking-table .booking-head > span:nth-child(11),
.booking-table .booking-head > span:nth-child(12) { text-align: right; }

/* ---------- Столбцы в кассе ----------
   Их десять, и раньше таблица уезжала вбок. Задаём ширины: узкое —
   узким, а контрагенту и статье оставляем место под текст. */
.operations-table { width: 100%; table-layout: fixed; }
.operations-table th,
.operations-table td {
  padding: 7px 6px;
  font-size: var(--ш-12-5);
  overflow: hidden;
  text-overflow: ellipsis;
}
.operations-table td small { display: block; font-size: var(--ш-11); color: var(--muted); }
/* ---------- Ширины колонок кассы ----------

   У плановых и у выполненных теперь РАЗНЫЙ состав столбцов:
   в плановых их шесть (…, ТО, Сумма, действия), в выполненных —
   восемь или девять, с «Кому платили» и «Чек», который есть не
   всегда. Пока ширины были заданы одним набором по номеру
   столбца, «Кто провёл» и кнопки в конце то и дело съезжали не
   на свою позицию: там, где раньше стояла узкая колонка «Чек»
   (72px), после добавления «Кому платили» оказалась «Кто провёл»
   с именем и галочкой «деньги пришли» — и не помещалась.
   Так спрятался чекбокс подтверждения прихода.

   Считаем с двух концов: первые столбцы — по номеру от начала
   (они не меняются), последние два — по номеру от конца (они
   всегда «Кто провёл» и кнопки действий, чек между ними бывает
   или нет). */
.operations-table.plan col:nth-child(1) { width: 96px; }   /* Дата */
.operations-table.plan col:nth-child(2) { width: 22%; }    /* Статья */
.operations-table.plan col:nth-child(3) { width: 30%; }    /* Договор и контрагент */
.operations-table.plan col:nth-child(4) { width: 16%; }    /* ТО */
.operations-table.plan col:nth-child(5) { width: 118px; }  /* Сумма */
.operations-table.plan col:nth-child(6) { width: 72px; }   /* действия */

.operations-table.fact col:nth-child(1) { width: 112px; }   /* Дата */
.operations-table.fact col:nth-child(2) { width: 13%; }    /* Статья */
.operations-table.fact col:nth-child(3) { width: 19%; }    /* Договор и контрагент */
.operations-table.fact col:nth-child(4) { width: 12%; }    /* Кому платили */
.operations-table.fact col:nth-child(5) { width: 10%; }    /* Счёт */
.operations-table.fact col:nth-child(6) { width: 100px; }  /* Сумма */
/* Столбец чека — под маленькую плашку «не выбит», не больше:
   пояснения из него убраны, и держать под ним двести точек
   незачем — они нужнее договору и контрагенту. */
.operations-table.fact.с-чеком col:nth-child(7) { width: 96px; }
.operations-table.fact col:nth-last-child(2) { width: 150px; } /* Кто провёл · подтверждение */
/* Значков в действиях бывает до пяти в ряд, и вширь они таблицу
   раздувают. Ставим их столбиком — колонке хватает ширины одной
   кнопки, а строка становится выше, а не шире. */
.operations-table.fact col:nth-last-child(1) { width: 34px; } /* действия — столбиком */

/* Договор, турист и номер брони у туроператора — одной ячейкой */
.op-who small { display: block; font-size: var(--ш-11); color: var(--muted); }
.op-who strong { font-size: var(--ш-12-5); }

/* Кто провёл платёж и кто его сверил. Здесь бывает имя плюс
   галочка «деньги пришли» — двум строкам нужно место, а общее
   правило ячеек кассы обрезает всё в одну строку с многоточием.
   Снимаем это ограничение именно тут. */
.operations-table td.op-by { overflow: visible; text-overflow: clip; white-space: normal; }
.op-by span { font-weight: 600; }
.op-by small { display: block; font-size: var(--ш-11); }
.op-by .confirm-box { margin-top: 3px; }

/* Подтверждённый приход — спокойным зелёным: деньги на месте */
.operations-table tbody tr.confirmed td { background: rgba(20, 150, 120, 0.05); }

/* Деньги, которых ещё никто не видел на счёте. Подсвечена вся
   строка и слева стоит полоса: это незакрытое дело, а не пометка
   на память. Зелёный цвет здесь занят подтверждёнными, поэтому
   ожидание — тёплое, а не тревожно-красное: ничего пока не
   сломалось, просто выписку не смотрели. */
.operations-table tbody tr.ждёт-сверки td { background: rgba(200, 150, 40, 0.09); }
.operations-table tbody tr.ждёт-сверки td:first-child {
  box-shadow: inset 3px 0 0 rgba(200, 150, 40, 0.75);
}
.operations-table tbody tr.ждёт-сверки:hover td { background: rgba(200, 150, 40, 0.15); }

/* Галочка «деньги пришли». Кликают подряд по выписке, поэтому она
   крупная и с подписью: попасть надо с первого раза. */
.confirm-box {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: var(--ш-11-5); color: var(--ink); white-space: nowrap;
}
.confirm-box input { width: 15px; height: 15px; cursor: pointer; margin: 0; }
/* Групповое подтверждение старых операций. Приглушено нарочно:
   это не именная сверка по выписке, и выглядеть так же не должно. */
.muted-line { color: var(--muted); font-size: var(--ш-11); }

/* Кассы в офисе: имя, хвост ключа и когда последний раз выходила
   на связь. Последнее важнее остального — по нему видно, жива ли
   касса, раньше чем по ней попробуют пробить чек. */
/* Кнопка внутри строки таблицы: заметная, но не крупнее строки */
.secondary-btn.small { padding: 3px 9px; font-size: var(--ш-11-5); }

/* Итог под расчётами: цена правится здесь же, рядом с деньгами
   по ней, а не в отдельном блоке этажом ниже. */
/* Заголовок столбца, по которому можно отобрать. Приглушён, пока
   отбор не выбран, — иначе шапка пестрит и читается хуже данных. */
/* Кнопка «как дотянуть» прямо на полосе плана. Когда отстаём —
   заметная: в этот момент вопрос и возникает. */
/* Кому давать статью. Блок в редакторе статьи: сначала «давать
   ли вообще», и только потом — кому именно. Иначе список из семи
   галочек висит там, где он не нужен. */
/* Что мешает по заявке прямо сейчас. Стоит первым в правой
   колонке: это то, ради чего карточку и открывают. */
/* Что главного в разделе — своими словами, до всякой модели */
.help-guide {
  border-left: 3px solid var(--metal-mid); padding: 2px 0 2px 12px;
  margin-bottom: 14px;
}
.help-guide p { margin: 0; font-size: var(--ш-13-5); line-height: 1.6; }

.crit-panel { border-left: 3px solid var(--line); }
.crit-panel.hot { border-left-color: var(--rose); }
.crit-panel.ok { border-left-color: var(--green); }
.crit-list { display: grid; gap: 8px; }
.crit-item {
  border-radius: 9px; padding: 9px 11px; background: var(--surface-soft);
  border: 1px solid var(--line);
}
.crit-item.критично { border-color: rgba(200, 80, 60, 0.45); background: rgba(200, 80, 60, 0.05); }
.crit-item strong { display: block; font-size: var(--ш-13-5); }
.crit-item.критично strong { color: var(--rose); }
.crit-item p { margin: 3px 0 0; font-size: var(--ш-12); color: var(--muted); line-height: 1.45; }

.kb-ai-box {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  margin-top: 14px; background: var(--surface-soft); display: grid; gap: 10px;
}
.kb-ai-main { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.kb-ai-main input { margin-top: 3px; width: 16px; height: 16px; }
.kb-ai-main small { display: block; font-size: var(--ш-11-5); color: var(--muted); }
.kb-ai-who > p { margin: 0 0 8px; font-size: var(--ш-12-5); color: var(--muted); }
.kb-ai-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.kb-ai-item {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
  background: var(--surface); font-size: var(--ш-12-5);
}
.kb-ai-item.on { border-color: var(--metal-mid); }
.kb-ai-item input { margin-top: 2px; }
.kb-ai-item small { display: block; font-size: var(--ш-11); color: var(--muted); }

.plan-ask {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--ш-12); padding: 4px 12px;
  cursor: pointer; white-space: nowrap;
}
.plan-ask:hover { border-color: var(--metal-mid); }
.plan-ask.зовёт { border-color: var(--amber); color: var(--amber); font-weight: 600; }

/* Разговор с наставником: реплики как в переписке — так видно,
   кто что сказал, и разговор читается, а не разъезжается. */
.chat-thread {
  display: grid; gap: 8px; max-height: 42vh; overflow-y: auto;
  margin: 12px 0; padding-right: 4px;
}
.chat-bubble {
  border-radius: 12px; padding: 10px 13px; font-size: var(--ш-13-5); line-height: 1.55;
  max-width: 88%;
}
.chat-bubble.ии { background: var(--surface-soft); border: 1px solid var(--line); }
.chat-bubble.мой {
  background: var(--metal-soft, #e8eef0); margin-left: auto; text-align: left;
}
.chat-bubble.ждём { color: var(--muted); font-style: italic; }
.chat-who { display: block; margin-top: 6px; font-style: normal; font-size: var(--ш-11); color: var(--muted); }

.head-filter { cursor: pointer; }
.head-filter:hover { color: var(--ink); }
.head-filter.on { color: var(--metal-mid); font-weight: 600; }
.head-filter small { display: block; font-weight: 400; font-size: var(--ш-10-5); color: var(--muted); }

/* Выбор из списка в окне: этап, менеджер, источник. Кнопками, а не
   выпадающим списком — пальцем по списку попадают точнее. */
.filter-choices { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.filter-choice {
  text-align: left; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: var(--ш-13-5); color: var(--ink);
}
.filter-choice:hover { background: var(--surface-soft); border-color: var(--metal-mid); }
.filter-choice.on { border-color: var(--metal-mid); background: var(--surface-soft); font-weight: 600; }

/* Выставленные счета рядом с расчётами: видно, что выставляли,
   когда и на сколько — и можно открыть тот самый, а не собрать
   новый с сегодняшней датой. */
/* Неделя очереди к ИИ: видно, растёт ожидание или нет */
.ai-week { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-week-day {
  display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 10px; min-width: 76px; background: var(--surface);
}
.ai-week-day span { font-size: var(--ш-11); color: var(--muted); }
.ai-week-day strong { font-size: var(--ш-15); font-variant-numeric: tabular-nums; }
.ai-week-day em { font-style: normal; font-size: var(--ш-10-5); color: var(--muted); }

.invoice-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; align-items: center; }
.invoice-file {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: 5px 12px 5px 9px; cursor: pointer; font: inherit; font-size: var(--ш-12);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.invoice-file:hover { border-color: var(--metal-mid); background: var(--surface-soft); }
.invoice-clip { font-style: normal; font-size: var(--ш-12); opacity: 0.7; }

.settle-edit { display: grid; }
.settle-edit .field-cell { margin: 0; }
.settle-edit input { font-weight: 600; }

/* Одна строка вместо целого блока «из чего складывается доход»:
   сколько заработали и сколько это в процентах. */
.commission-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px;
  padding: 10px 14px; margin-top: 14px; background: var(--surface-soft);
}
.commission-line span { color: var(--muted); font-size: var(--ш-12-5); }
.commission-line strong { font-size: var(--ш-17); font-variant-numeric: tabular-nums; }
.commission-line em { font-style: normal; color: var(--muted); font-size: var(--ш-13); }
.commission-line .commission-warn {
  font-style: normal; font-size: var(--ш-12); color: var(--rose); margin-left: auto;
}
/* Тона здесь те же, что у зон комиссии по всей системе */
.commission-line.zone-bad, .commission-line.zone-low { border-left-color: var(--rose); }
.commission-line.zone-mid { border-left-color: var(--line); }
.commission-line.zone-good, .commission-line.zone-high { border-left-color: var(--green); }

.term-list { display: grid; gap: 8px; margin: 10px 0; }
.term-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.term-row small { display: block; font-size: var(--ш-11-5); color: var(--muted); }

/* Строка чека в окне «Выбить чек». Отделена рамкой: строк может
   быть несколько, и у каждой свой исполнитель — перепутать их
   значит выбить чек не от того лица. */
.chek-line {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px;
  background: var(--surface-soft);
}
.link-btn.tiny { font-size: var(--ш-10-5); padding: 0; margin-left: 6px; }

.operations-table td:nth-last-child(-n+5).settle-sum,
.operations-table .settle-sum { text-align: right; }

/* ---------- Строки списка броней: одна строка на ячейку ----------
   Раньше длинное название туроператора или три номера брони
   разворачивались в столбик, и строки получались разной высоты —
   таблицу невозможно было читать глазами по горизонтали. */
@media (min-width: 901px) {
  .booking-table .booking-row > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
  }
  /* Две строки — можно, три и больше — нет. Столбцы остаются ровными,
     а длинное название не сокращается до нечитаемого огрызка. */
  .booking-table .booking-row > span > strong,
  .booking-table .booking-row > span > small,
  .booking-table .booking-row > span > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  /* У строки с двумя подписями каждой достаётся по одной строке */
  .booking-table .booking-row > span > strong + small,
  .booking-table .booking-row > span > small + small { -webkit-line-clamp: 1; }
  /* Метки могут занимать две строки — их немного и они короткие */
  .booking-table .booking-row > span.booking-tags {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    gap: 3px;
  }
  .booking-table .booking-row > span.booking-tags small {
    white-space: nowrap;
    max-width: 100%;
  }
  /* Плашка статуса не должна растягивать строку */
  .booking-table .booking-row .pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Одинаковая высота строк — глаз не спотыкается.
     Под две строки текста плюс подпись снизу. */
  .booking-table .booking-row:not(.booking-head) { min-height: 68px; }
}

/* ---------- Секретный блок: доступ в кабинет туроператора ----------
   Пароль не должен попадаться на глаза случайно, поэтому по умолчанию
   он скрыт, а открытое состояние заметно окрашено. */
.secret-block {
  border: 1px dashed var(--line);
  background: var(--surface-soft);
}
.secret-closed p {
  margin: 0 0 12px;
  font-size: var(--ш-13);
  color: var(--choco-soft);
  line-height: 1.5;
}
.secret-open {
  border-left: 3px solid var(--rose);
  padding-left: 14px;
}
.secret-value {
  display: inline-block;
  padding: 3px 9px;
  margin-right: 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ш-13);
  letter-spacing: 0.02em;
  user-select: all;
}

/* История переносов рейса: было → стало. Фактическое время стоит
   в самих полях, первоначальное видно здесь. */
.flight-changes {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--amber, #d99100);
  background: rgba(217, 145, 0, 0.07);
  border-radius: 0 6px 6px 0;
  font-size: var(--ш-12-5);
}
.flight-changes ul { margin: 5px 0 0; padding-left: 16px; }
.flight-changes li { margin: 2px 0; }

/* Два слота под важные документы брони */
.keydocs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.keydoc {
  border: 1px dashed var(--line, #d7dce5);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-2, #fafbfd);
}
.keydoc.filled { border-style: solid; border-color: var(--green, #2e9e5b); }
.keydoc-file strong { display: block; margin-top: 8px; word-break: break-all; }
.keydoc-file small, .keydoc-empty small { display: block; color: var(--muted, #6b7280); margin-top: 3px; }
.keydoc-empty { margin-top: 10px; }

/* ---------- Полоса план/факт ----------
   Первое, что видит сотрудник, открыв срм. Цвет по темпу:
   красный — отстаём, жёлтый — почти, зелёный — в плане. */
.plan-strip {
  border: 1px solid var(--line, #d7dce5);
  border-left: 5px solid var(--muted, #9aa3b2);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: var(--surface, #fff);
}
.plan-strip.tone-green  { border-left-color: #2e9e5b; background: rgba(46,158,91,0.06); }
.plan-strip.tone-amber  { border-left-color: #d99100; background: rgba(217,145,0,0.07); }
.plan-strip.tone-rose   { border-left-color: #d84a5a; background: rgba(216,74,90,0.07); }
.plan-strip.tone-grey   { border-left-color: #9aa3b2; }
.plan-strip-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-strip-head span { color: var(--muted, #6b7280); font-size: var(--ш-12-5); }
.plan-strip-head strong { font-size: var(--ш-17); }
.plan-strip-pct { margin-left: auto; font-style: normal; font-weight: 700; font-size: var(--ш-17); }
.tone-green  .plan-strip-pct { color: #2e9e5b; }
.tone-amber  .plan-strip-pct { color: #b87b00; }
.tone-rose   .plan-strip-pct { color: #c53547; }
.tone-grey   .plan-strip-pct { color: #6b7280; font-weight: 600; font-size: var(--ш-13); }
.plan-strip-bar {
  position: relative; height: 9px; margin: 8px 0 6px;
  background: rgba(0,0,0,0.07); border-radius: 5px; overflow: visible;
}
.plan-strip-bar > i { display: block; height: 100%; border-radius: 5px; background: #9aa3b2; }
.tone-green .plan-strip-bar > i { background: #2e9e5b; }
.tone-amber .plan-strip-bar > i { background: #d99100; }
.tone-rose  .plan-strip-bar > i { background: #d84a5a; }
/* Засечка «столько должно быть к сегодняшнему дню» */
.plan-strip-bar > b {
  position: absolute; top: -3px; width: 2px; height: 15px;
  background: #1f2937; opacity: 0.55; border-radius: 1px;
}
.plan-strip-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: var(--ш-12-5); color: var(--muted, #6b7280);
}

/* ---------- Воронка продаж ---------- */
.funnel { display: grid; gap: 6px; margin: 4px 0 10px; }
.funnel-step {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 2.4fr) minmax(120px, 0.9fr);
  gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent;
}
.funnel-step:nth-child(odd) { background: var(--surface-2, #fafbfd); }
.funnel-step.funnel-worst { border-color: #d84a5a; background: rgba(216,74,90,0.06); }
.funnel-label strong { display: block; font-size: var(--ш-13-5); }
.funnel-label span { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); line-height: 1.3; }
.funnel-bar {
  position: relative; height: 26px; border-radius: 6px;
  background: rgba(0,0,0,0.05); display: flex; align-items: center;
}
.funnel-bar > i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #2f6fb5, #4b9fd6);
  min-width: 3px;
}
.funnel-bar > b {
  position: absolute; left: 9px; color: #fff; font-size: var(--ш-12-5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.funnel-worst .funnel-bar > i { background: linear-gradient(90deg, #b83b49, #d84a5a); }
.funnel-num strong { display: block; font-size: var(--ш-15); }
.funnel-num small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); }

/* ---------- Новые и постоянные ---------- */
.ct-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 6px; }
.ct-card { border: 1px solid var(--line, #d7dce5); border-radius: 10px; padding: 12px 14px; background: var(--surface, #fff); }
.ct-head { display: flex; align-items: baseline; gap: 10px; }
.ct-conv { margin-left: auto; font-style: normal; font-weight: 700; font-size: var(--ш-20); color: #2f6fb5; }
.ct-rows { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0 6px; font-size: var(--ш-12-5); }
.ct-rows dt { color: var(--muted, #6b7280); }
.ct-rows dd { margin: 0; text-align: right; font-weight: 600; }
.ct-note { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); line-height: 1.35; }

/* Светофор на карточках отчёта */
.report-card.tone-green { border-color: rgba(46,158,91,0.55); }
.report-card.tone-amber { border-color: rgba(217,145,0,0.6); }
.report-card.tone-rose  { border-color: rgba(216,74,90,0.6); background: rgba(216,74,90,0.04); }
.report-card.tone-rose strong { color: #c53547; }

/* ---------- Планы продаж ---------- */
.plans-panel { display: grid; gap: 16px; margin-bottom: 6px; }
.plans-group h4 { margin: 0 0 8px; font-size: var(--ш-13); text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.sales-plan-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) minmax(240px, 1.6fr) minmax(140px, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--line, #d7dce5);
  border-left: 4px solid var(--muted, #9aa3b2);
  border-radius: 9px; background: var(--surface, #fff);
}
.sales-plan-row.tone-green { border-left-color: #2e9e5b; }
.sales-plan-row.tone-amber { border-left-color: #d99100; }
.sales-plan-row.tone-rose  { border-left-color: #d84a5a; }
.sales-plan-row.tone-grey  { border-left-color: #9aa3b2; }
.plan-row-who strong { display: block; }
.plan-row-who span { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); }
.plan-row-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-field { display: grid; gap: 3px; min-width: 118px; }
.plan-field span { color: var(--muted, #6b7280); font-size: var(--ш-11); }
.plan-field input {
  width: 100%; padding: 6px 8px; font-size: var(--ш-13);
  border: 1px solid var(--line, #d7dce5); border-radius: 6px;
}
.plan-field b { font-size: var(--ш-14); }
.plan-row-fact strong { display: block; font-size: var(--ш-17); }
.plan-row-fact small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); }
/* Карточка плана: менеджер и ввод плана компактные, факт и анализ читаемые. */
/* Единый читаемый масштаб текста в карточках планов. */
@media (min-width: 701px) {
  .sales-plan-row,
  .sales-plan-row .plan-row-who,
  .sales-plan-row .plan-row-fields,
  .sales-plan-row .plan-row-fact {
    font-size: var(--ш-14);
  }
  .sales-plan-row .plan-row-who strong { font-size: var(--ш-15); line-height: 1.22; }
  .sales-plan-row .plan-row-who span,
  .sales-plan-row .plan-field span { font-size: var(--ш-12-5); }
  .sales-plan-row .plan-field b { font-size: var(--ш-16); }
  .sales-plan-row .plan-field input { font-size: var(--ш-14); min-height: 34px; }
  .sales-plan-row .plan-row-fact strong { font-size: var(--ш-21); }
  .sales-plan-row .plan-row-fact small { font-size: var(--ш-13); line-height: 1.3; }
  .sales-plan-row .plan-lock,
  .sales-plan-row .plan-draft,
  .sales-plan-row .plan-none { font-size: var(--ш-11-5); }
}
@media (min-width: 701px) {
  .sales-plan-row {
    grid-template-columns: minmax(140px, .82fr) minmax(135px, .78fr) minmax(270px, 1.8fr) auto;
    gap: 10px;
  }
  .plan-row-who { min-width: 0; }
  .plan-row-who strong { display: block; max-width: 185px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  .plan-row-fields { min-width: 0; }
  .plan-field { min-width: 0; width: 100%; }
  .plan-field input { max-width: 150px; }
  .plan-row-fact { min-width: 0; }
  .plan-row-fact strong { font-size: var(--ш-20); line-height: 1.05; }
  .plan-row-fact small { font-size: var(--ш-12-5); line-height: 1.25; overflow-wrap: anywhere; }
}
.sales-plan-row.tone-rose .plan-row-fact strong { color: #c53547; }
.sales-plan-row.tone-amber .plan-row-fact strong { color: #b87b00; }
.sales-plan-row.tone-green .plan-row-fact strong { color: #2e9e5b; }
.plan-lock, .plan-draft, .plan-none {
  display: inline-block; margin-top: 3px; font-style: normal;
  font-size: var(--ш-10-5); padding: 1px 6px; border-radius: 9px;
}
.plan-lock  { background: rgba(46,158,91,0.14); color: #1f7245; }
.plan-draft { background: rgba(217,145,0,0.16); color: #8f6100; }
.plan-none  { background: rgba(0,0,0,0.06); color: #6b7280; }
.plans-warn {
  margin: 4px 0 0; padding: 8px 10px; font-size: var(--ш-12-5);
  border-left: 3px solid #d99100; background: rgba(217,145,0,0.08);
  border-radius: 0 6px 6px 0;
}
.plan-input {
  width: 108px; padding: 5px 7px; font-size: var(--ш-13);
  border: 1px solid var(--line, #d7dce5); border-radius: 6px;
}
.pct-cell.tone-rose  { background: rgba(216,74,90,0.07); }
.pct-cell.tone-amber { background: rgba(217,145,0,0.08); }
.pct-cell.tone-green { background: rgba(46,158,91,0.07); }
.pct-cell strong { font-size: var(--ш-14); }
.pct-cell.tone-rose strong  { color: #c53547; }
.pct-cell.tone-amber strong { color: #b87b00; }
.pct-cell.tone-green strong { color: #2e9e5b; }
.pct-cell small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-10-5); }

/* ---------- База знаний: черновики ---------- */
.kb-review {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 10px; padding: 9px 12px;
  border-left: 3px solid #d99100; background: rgba(217,145,0,0.08);
  border-radius: 0 7px 7px 0; font-size: var(--ш-12-5);
}
.kb-review strong { font-size: var(--ш-13); }
.kb-review span { color: var(--muted, #6b7280); flex: 1 1 220px; }
.kb-draft {
  font-style: normal; font-size: var(--ш-10); padding: 1px 6px; border-radius: 9px;
  background: rgba(217,145,0,0.18); color: #8f6100;
}

/* ---------- График работы офиса ----------
   Повторяет привычную таблицу: неделя по горизонтали, люди строками. */
.sched-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: start; }
@media (max-width: 1100px) { .sched-layout { grid-template-columns: 1fr; } }
.sched-table-wrap { overflow-x: auto; }
.sched-table { min-width: 720px; }
.sched-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) repeat(7, minmax(74px, 1fr));
  border-bottom: 1px solid var(--line, #e3e7ee);
}
.sched-row:last-child { border-bottom: 0; }
.sched-name { padding: 6px 9px; display: flex; flex-direction: column; justify-content: center; }
.sched-name strong { font-size: var(--ш-13); line-height: 1.2; }
.sched-name span { color: var(--muted, #6b7280); font-size: var(--ш-10-5); line-height: 1.2; }
.sched-cell {
  padding: 3px 4px; border-left: 1px solid var(--line, #e3e7ee);
  display: flex; align-items: center; justify-content: center; min-height: 34px;
}
.sched-cell.weekend { background: rgba(0,0,0,0.025); }
.sched-cell.today { box-shadow: inset 0 0 0 2px rgba(47,111,181,0.35); }

.sched-head { background: #2f6fb5; color: #fff; border-radius: 8px 8px 0 0; }
.sched-head .sched-name { color: #fff; font-size: var(--ш-12); font-weight: 600; }
.sched-day { flex-direction: column; gap: 0; line-height: 1.15; }
.sched-day b { font-size: var(--ш-12-5); }
.sched-day span { font-size: var(--ш-10); opacity: .85; }
.sched-head .sched-cell { border-left-color: rgba(255,255,255,0.25); }
.sched-head .sched-cell.weekend { background: rgba(255,255,255,0.12); }

.sched-group { background: rgba(217,145,0,0.10); }
.sched-group .sched-name { font-weight: 700; font-size: var(--ш-12); }
.sched-events { background: rgba(47,111,181,0.05); }
.sched-events .sched-name { font-size: var(--ш-11-5); color: var(--muted, #6b7280); }
.sched-ev { font-size: var(--ш-11); text-align: center; line-height: 1.2; font-weight: 600; color: #2f6fb5; }
.sched-empty { color: #c3c9d4; }

.sched-input {
  width: 100%; min-width: 0; padding: 4px 2px; text-align: center;
  font-size: var(--ш-12-5); border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: inherit;
}
.sched-input:hover { border-color: var(--line, #d7dce5); }
.sched-input:focus { border-color: #2f6fb5; background: #fff; outline: none; }
.sched-event { font-size: var(--ш-11); font-weight: 600; }
.sched-value { font-size: var(--ш-12-5); }

/* Тона клеток по виду смены */
.sched-cell.tone-off      { background: rgba(217,145,0,0.16); }
.sched-cell.tone-remote   { background: rgba(47,111,181,0.07); }
.sched-cell.tone-vacation { background: rgba(46,158,91,0.14); }
.sched-cell.tone-sick     { background: rgba(216,74,90,0.13); }

.sched-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; font-size: var(--ш-12); }
.sched-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px; }
.sched-legend .tone-off      { background: rgba(217,145,0,0.16); }
.sched-legend .tone-remote   { background: rgba(47,111,181,0.09); }
.sched-legend .tone-vacation { background: rgba(46,158,91,0.14); }
.sched-legend .tone-sick     { background: rgba(216,74,90,0.13); }
.sched-legend .tone-shift    { background: rgba(0,0,0,0.05); }

.today-who h4 { margin: 12px 0 5px; font-size: var(--ш-12); text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.today-who h4:first-child { margin-top: 0; }
.today-who p { margin: 2px 0; display: flex; justify-content: space-between; gap: 10px; font-size: var(--ш-13); }
.today-who p span { color: var(--muted, #6b7280); font-size: var(--ш-12); }

/* Подписи «что именно считаем» — чтобы план продаж и план комиссии
   не выглядели одним и тем же */
.plan-hint { flex: 1 1 100%; color: var(--muted, #6b7280); font-size: var(--ш-11); line-height: 1.35; }
.card-what { color: var(--muted, #6b7280); font-size: var(--ш-11); font-style: italic; }

/* ---------- Вложения писем ---------- */
.mail-clip { font-style: normal; margin-right: 5px; opacity: .75; }
.mail-atts {
  margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--line, #d7dce5); border-radius: 9px;
  background: var(--surface-2, #fafbfd);
}
.mail-atts > strong { display: block; font-size: var(--ш-12-5); margin-bottom: 8px; }
.mail-att-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Имя файла и кнопки в один ряд не помещаются: панель письма узкая,
   и имя сжималось в вертикальный столбик по букве. Кладём кнопки
   на вторую строку. */
.mail-att {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px; align-items: start;
  padding: 8px 10px; border: 1px solid var(--line, #e3e7ee);
  border-radius: 8px; background: var(--surface, #fff);
}
.mail-att.too-big { opacity: .65; border-style: dashed; }
.mail-att-kind {
  font-style: normal; font-size: var(--ш-10); font-weight: 700; letter-spacing: .03em;
  padding: 5px 6px; border-radius: 5px; background: rgba(47,111,181,0.12);
  color: #2f6fb5; flex: 0 0 auto;
}
.mail-att > div { min-width: 0; }
.mail-att strong {
  display: block; font-size: var(--ш-12-5); line-height: 1.25;
  overflow-wrap: anywhere; word-break: normal;
}
.mail-att small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11); }
.mail-att .row-actions {
  grid-column: 2; margin: 2px 0 0;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* ---------- Совместные брони ----------
   Номера, которые менеджер вписал руками, — ссылками. */
.joint-list { display: grid; gap: 6px; margin-top: 10px; }
.joint-row {
  display: grid; grid-template-columns: minmax(100px, auto) minmax(120px, 1.3fr) minmax(100px, 1fr) 100px auto;
  gap: 10px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px; font-size: var(--ш-12-5);
}
.joint-row span { color: var(--muted, #6b7280); }
.joint-row.missing { border-style: dashed; opacity: .75; }

/* ---------- Сверка паспорта ----------
   Ошибка в букве загранпаспорта стоит переоформления билета,
   поэтому состояние видно сразу, а не прячется в истории. */
.pass-check {
  margin: 10px 0 8px; padding: 9px 12px; border-radius: 0 7px 7px 0;
  border-left: 3px solid var(--muted, #9aa3b2); font-size: var(--ш-12-5);
}
.pass-check strong { display: block; }
.pass-check span { color: var(--muted, #6b7280); }
.pass-check.ok    { border-left-color: #2e9e5b; background: rgba(46,158,91,0.07); }
.pass-check.warn  { border-left-color: #d99100; background: rgba(217,145,0,0.08); }
.pass-check.empty { border-left-color: #9aa3b2; background: rgba(0,0,0,0.03); }
.pass-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pass-scans { font-size: var(--ш-12); }
.pass-scans.muted { color: var(--muted, #6b7280); }
.pass-history { margin-top: 8px; font-size: var(--ш-12); }
.pass-history summary { cursor: pointer; color: var(--muted, #6b7280); }
.pass-history ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- QR на счёте ---------- */
.invoice-qr {
  display: flex; gap: 16px; align-items: center;
  margin: 14px 0; padding: 12px;
  border: 1px solid var(--line, #d7dce5); border-radius: 10px;
}
.invoice-qr svg { flex: 0 0 auto; }
.invoice-qr strong { display: block; font-size: var(--ш-14); }
.invoice-qr p { margin: 4px 0; font-size: var(--ш-12-5); }
.invoice-qr small { color: var(--muted, #6b7280); font-size: var(--ш-11); }
@media print { .invoice-qr { break-inside: avoid; } }

/* ---------- Нормативы и тренд ----------
   Цвета взяты из отчёта, которым в агентстве пользовались раньше:
   к ним привыкли, и переучиваться незачем. */
.norm-head {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 4px 0 10px;
}
.norm-head > div {
  border: 1px solid var(--line, #e3e7ee); border-radius: 9px;
  padding: 9px 12px; background: var(--surface-2, #fafbfd);
}
.norm-head span { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); }
.norm-head strong { font-size: var(--ш-19); }
.norm-head small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11); }

.norm-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: var(--ш-11-5); }
.norm-legend span { padding: 2px 9px; border-radius: 11px; }
.norm-legend .tone-rose  { background: rgba(216,74,90,0.14); color: #a32b3a; }
.norm-legend .tone-amber { background: rgba(217,145,0,0.18); color: #8f6100; }
.norm-legend .tone-green { background: rgba(46,158,91,0.15); color: #1f7245; }
.norm-legend .tone-blue  { background: rgba(47,111,181,0.15); color: #23568f; }
/* Перевыполнение больше 120%: синим, как в старом отчёте агентства */
.chance-120 { font-style: normal; font-weight: 600; color: #1f7245; }
.chance-120.blue { color: #23568f; background: rgba(47,111,181,0.12); padding: 1px 7px; border-radius: 9px; }
.norm-quote { margin: 10px 0 4px; padding: 10px 14px; border-left: 3px solid #2f6fb5;
  background: rgba(47,111,181,0.08); color: #23568f; font-size: var(--ш-12-5); line-height: 1.45; }
.norm-quote strong { display: block; margin-bottom: 4px; }
.norm-quote p { margin: 0 0 4px; }
.norm-quote small { display: block; text-align: right; opacity: 0.8; }

.norm-sub { margin: 14px 0 6px; font-size: var(--ш-13); color: var(--muted, #6b7280); }
.norm-table { width: 100%; border-collapse: collapse; font-size: var(--ш-12-5); }
.norm-table th {
  text-align: left; padding: 7px 8px; font-size: var(--ш-11); font-weight: 600;
  color: var(--muted, #6b7280); border-bottom: 1px solid var(--line, #e3e7ee);
  white-space: nowrap;
}
.norm-table td { padding: 7px 8px; border-bottom: 1px solid var(--line, #eef1f5); vertical-align: top; }
.norm-table td small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-10-5); }
.norm-table tr.norm-total td { border-top: 2px solid var(--line, #d7dce5); background: var(--surface-2, #fafbfd); }
.norm-cell strong { font-size: var(--ш-13-5); }
.norm-cell.tone-rose  { background: rgba(216,74,90,0.12); }
.norm-cell.tone-rose  strong { color: #a32b3a; }
.norm-cell.tone-amber { background: rgba(217,145,0,0.16); }
.norm-cell.tone-amber strong { color: #8f6100; }
.norm-cell.tone-green { background: rgba(46,158,91,0.12); }
.norm-cell.tone-green strong { color: #1f7245; }
.norm-cell.tone-blue  { background: rgba(47,111,181,0.13); }
.norm-cell.tone-blue  strong { color: #23568f; }
.norm-cell.tone-grey  { color: var(--muted, #6b7280); }

/* ---------- Личные почтовые ящики ---------- */
.mailbox-list { display: grid; gap: 6px; margin: 8px 0; }
.mailbox-row {
  display: grid; grid-template-columns: minmax(160px, 1fr) auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px;
}
.mailbox-row.off { opacity: .65; }
.mailbox-row strong { display: block; font-size: var(--ш-13); }
.mailbox-row small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); }
.mailbox-row .row-actions { margin: 0; display: flex; gap: 8px; }

/* ---------- Что передал менеджер клиентскому сервису ----------
   Записка из заявки: её пишут один раз при передаче, а читают
   потом каждый раз, когда берут бронь в работу. */
.service-note {
  padding: 11px 13px; margin-bottom: 10px;
  border-left: 3px solid #2f6fb5;
  background: rgba(47,111,181,0.06);
  border-radius: 0 8px 8px 0;
  font-size: var(--ш-13); line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
}

/* Комиссия банка в расчётах с партнёрами: её видно сразу, потому что
   в выписке она выглядит как обычная оплата туроператору. */
.settle-row.bank-fee { background: rgba(217,145,0,0.07); }
.settle-row.bank-fee .settle-sum strong { color: #8f6100; }
.icon-line.on { background: rgba(217,145,0,0.2); border-color: #d99100; color: #8f6100; }

/* ---------- Выбор папок ящика ---------- */
.folder-pick { max-height: 340px; overflow-y: auto; display: grid; gap: 2px; margin-top: 8px; }
.folder-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 6px; font-size: var(--ш-13); cursor: pointer;
}
.folder-row:hover { background: var(--surface-2, #fafbfd); }
.folder-row b { color: var(--muted, #6b7280); font-weight: 600; font-size: var(--ш-12); }
.folder-row i {
  font-style: normal; font-size: var(--ш-10-5); padding: 1px 6px; border-radius: 9px;
  background: rgba(46,158,91,0.15); color: #1f7245;
}

/* ---------- Папки почты ----------
   У агентства это фактически туроператоры: письма разложены по ним
   правилами в самом ящике. */
.mail-folders {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin: 6px 0 8px; max-height: 96px; overflow-y: auto;
}
.mail-folder {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 12px; font-size: var(--ш-11-5);
  border: 1px solid var(--line, #d7dce5); background: var(--surface, #fff);
  cursor: pointer;
}
.mail-folder:hover { border-color: #2f6fb5; }
.mail-folder.on { background: #2f6fb5; border-color: #2f6fb5; color: #fff; }
.mail-folder i { font-style: normal; opacity: .7; font-size: var(--ш-10-5); }

/* Кому уходят деньги: у операторов расчёты идут через отдельное
   юрлицо, и без пометки это выглядит как ошибка. */
.pay-other {
  font-style: normal; font-size: var(--ш-10-5); padding: 1px 6px; border-radius: 9px;
  background: rgba(47,111,181,0.12); color: #23568f; white-space: nowrap;
}

/* Отделы в планах раскрываются: людей показываем по просьбе,
   а не вываливаем полсотни строк сразу. */
.plans-dept { margin-bottom: 10px; }
.dept-toggle {
  display: block; width: 100%; text-align: left;
  padding: 5px 12px; margin-top: 2px;
  border: 1px dashed var(--line, #d7dce5); border-radius: 7px;
  background: transparent; color: var(--muted, #6b7280);
  font-size: var(--ш-12); cursor: pointer;
}
.dept-toggle:hover { border-color: #2f6fb5; color: #2f6fb5; }
.plans-people { margin: 4px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--line, #e3e7ee); }
.plans-people .sales-plan-row { margin-bottom: 4px; }

/* Компактная строка фильтров в отчётах: месяц и отдел выбирают
   изредка, а места они занимали пол-экрана. */
.report-line { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 8px; }
.mini-field { display: grid; gap: 2px; }
.mini-field span { color: var(--muted, #6b7280); font-size: var(--ш-11); }
.mini-field select {
  padding: 5px 8px; font-size: var(--ш-13); min-width: 130px;
  border: 1px solid var(--line, #d7dce5); border-radius: 7px; background: var(--surface, #fff);
}

/* Конверсия в плане: слева факт прошлого месяца, справа то, что
   ставим себе. Планировать по вчерашней цифре нельзя — она уже была. */
.conv-set {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: end;
  margin: 12px 0 8px; padding: 10px 12px;
  border: 1px solid var(--line, #e3e7ee); border-radius: 9px;
  background: var(--surface-2, #fafbfd);
}
.conv-set > div, .conv-set > label { display: grid; gap: 2px; }
.conv-set span { color: var(--muted, #6b7280); font-size: var(--ш-11); }
.conv-set strong { font-size: var(--ш-19); }
.conv-set small { color: var(--muted, #6b7280); font-size: var(--ш-11); }
.conv-was { opacity: .6; }
.conv-plan input {
  width: 90px; padding: 5px 8px; font-size: var(--ш-15); font-weight: 600;
  border: 1px solid #2f6fb5; border-radius: 7px;
}

/* Отделы в таблице нормативов: строка отдела кликается и
   раскрывает своих людей. Без этого таблица на полсотни строк. */
.norm-table tr.norm-dept { cursor: pointer; background: rgba(47,111,181,0.05); }
.norm-table tr.norm-dept:hover { background: rgba(47,111,181,0.1); }
.norm-table tr.norm-dept td { font-weight: 600; }
.norm-table tr.norm-person td:first-child { padding-left: 22px; }
.norm-table tr.norm-person { font-size: var(--ш-12); }
/* Отчёт по планам: имя и аналитика должны читаться, а не сжиматься
   из-за второстепенных счётчиков. */
.norm-table { table-layout: fixed; }
.norm-table th, .norm-table td { overflow-wrap: anywhere; }
.norm-table th:nth-child(1), .norm-table td:nth-child(1) { width: 16%; }
.norm-table th:nth-child(2), .norm-table td:nth-child(2),
.norm-table th:nth-child(3), .norm-table td:nth-child(3),
.norm-table th:nth-child(4), .norm-table td:nth-child(4) { width: 5.5%; text-align: center; }
.norm-table th:nth-child(5), .norm-table td:nth-child(5),
.norm-table th:nth-child(8), .norm-table td:nth-child(8) { width: 10%; }
.norm-table th:nth-child(6), .norm-table td:nth-child(6),
.norm-table th:nth-child(7), .norm-table td:nth-child(7) { width: 7%; }
.norm-table th:nth-child(n+9), .norm-table td:nth-child(n+9) { width: 10%; }
.norm-table tr.norm-person td:first-child strong,
.norm-table tr.norm-dept td:first-child strong { display: block; max-width: 170px; line-height: 1.2; white-space: normal; }
.norm-table tr.norm-person td:nth-child(n+9),
.norm-table tr.norm-dept td:nth-child(n+9) { font-size: var(--ш-12-5); }
.norm-table tr.norm-person td:nth-child(n+9) small,
.norm-table tr.norm-dept td:nth-child(n+9) small { font-size: var(--ш-11-5); line-height: 1.25; }
.norm-table .norm-cell strong { font-size: var(--ш-14); }

/* ---------- Панель клиентского сервиса ----------
   Три колонки: кто летит, у кого не собраны документы, с кого ждём
   деньги. Всё кликается в бронь. */
.cs-panel { margin-bottom: 14px; }
.cs-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cs-block h4 {
  margin: 0 0 6px; font-size: var(--ш-12); text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted, #6b7280);
}
.cs-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline;
  width: 100%; text-align: left; padding: 5px 8px; margin-bottom: 3px;
  border: 1px solid transparent; border-radius: 7px;
  background: var(--surface-2, #fafbfd); cursor: pointer; font-size: var(--ш-12-5);
}
.cs-row:hover { border-color: #2f6fb5; background: rgba(47,111,181,0.06); }
.cs-row span { color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-row i { font-style: normal; font-weight: 600; white-space: nowrap; }

/* Поиск по броням: строка поиска всегда, остальные фильтры —
   по кнопке. Раньше они занимали треть экрана. */
.booking-quick { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.booking-quick .booking-search-field { flex: 1 1 auto; }
.booking-quick .booking-search-field input { width: 100%; }
.booking-quick .secondary-btn { white-space: nowrap; }
.booking-quick .secondary-btn.on { background: #2f6fb5; border-color: #2f6fb5; color: #fff; }
.booking-criteria.hidden { display: none; }

/* Черновик письма от модели: кнопка рядом с полем письма.
   Это заготовка, а не отправка — решает и отправляет человек. */
.ai-draft {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 8px 10px;
  border: 1px dashed var(--line, #d7dce5); border-radius: 8px;
  background: var(--surface-2, #fafbfd);
}

/* Результат сверки паспортов: читается как записка, а не как отчёт */
.match-result {
  padding: 12px 14px; margin-bottom: 10px;
  border-left: 3px solid #2f6fb5; border-radius: 0 8px 8px 0;
  background: rgba(47,111,181,0.06);
  font-size: var(--ш-13-5); line-height: 1.55;
}
.modal-list { margin: 4px 0 10px; padding-left: 20px; font-size: var(--ш-13); }
.modal-text.muted { color: var(--muted, #6b7280); font-size: var(--ш-12); }

/* ---------- Передача в клиентский сервис ---------- */
.hand-track { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.hand-step {
  flex: 1 1 110px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line, #e3e7ee); background: var(--surface-2, #fafbfd);
  font-size: var(--ш-12); font-weight: 600; color: var(--muted, #6b7280);
}
.hand-step i { display: block; font-style: normal; font-weight: 400; font-size: var(--ш-10-5); }
.hand-step.on { border-color: #2f6fb5; background: rgba(47,111,181,0.09); color: #23568f; }

.check-list { display: grid; gap: 5px; margin-bottom: 12px; }
.check-item {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start;
  padding: 7px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px;
}
.check-item.ok { border-color: rgba(46,158,91,0.4); background: rgba(46,158,91,0.05); }
.check-mark {
  width: 18px; height: 18px; border-radius: 5px; text-align: center; line-height: 18px;
  border: 1px solid var(--line, #d7dce5); font-size: var(--ш-12); color: #1f7245;
}
.check-item.ok .check-mark { border-color: #2e9e5b; background: rgba(46,158,91,0.15); }
.check-item strong { display: block; font-size: var(--ш-12-5); }
.check-item small { display: block; color: var(--muted, #6b7280); font-size: var(--ш-11-5); }

.ai-verdict {
  padding: 11px 13px; margin-bottom: 10px; border-radius: 0 8px 8px 0;
  font-size: var(--ш-13); line-height: 1.5; border-left: 3px solid;
}
.ai-verdict.ok { border-left-color: #2e9e5b; background: rgba(46,158,91,0.07); }
.ai-verdict.back { border-left-color: #d84a5a; background: rgba(216,74,90,0.07); }
.ai-verdict strong { display: block; margin-bottom: 5px; }

/* Видимость документа туристу: по умолчанию скрыт, показываем
   осознанно — договоры и подтверждения ему не нужны. */
.doc-share {
  display: flex; gap: 6px; align-items: center;
  margin: 6px 0 4px; font-size: var(--ш-11-5); color: var(--muted, #6b7280); cursor: pointer;
}
.doc-share input { margin: 0; }

/* ---------- Комментарий к договору ----------
   Не формальность: клиентский сервис знакомится с туристом по нему.
   Пустое поле бледное, односложный ответ подсвечен — видно сразу. */
.hand-comment { margin: 12px 0; }
.hand-comment h4 { margin: 0 0 4px; font-size: var(--ш-13); }
.hand-field { display: grid; gap: 3px; margin-bottom: 8px; }
.hand-field span { font-size: var(--ш-12); color: var(--muted, #6b7280); }
.hand-field textarea {
  width: 100%; padding: 7px 9px; font: inherit; font-size: var(--ш-13);
  border: 1px solid var(--line, #d7dce5); border-radius: 7px; resize: vertical;
}
.hand-field.filled textarea { border-color: rgba(46,158,91,0.5); background: rgba(46,158,91,0.04); }
.hand-field.thin textarea { border-color: #d99100; background: rgba(217,145,0,0.07); }
.check-private { color: #8f6100; }
.check-mark.hand { display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.check-mark.hand input { margin: 0; cursor: pointer; }

/* Подтверждение полноты платежей: подозрение снимает человек,
   и видно, кто именно. */
.check-confirm {
  display: inline-flex; gap: 6px; align-items: center; margin-top: 5px;
  padding: 3px 8px; border-radius: 12px; font-size: var(--ш-11-5); cursor: pointer;
  border: 1px solid #d99100; background: rgba(217,145,0,0.1); color: #8f6100;
}
.check-confirm.done { border-color: #2e9e5b; background: rgba(46,158,91,0.12); color: #1f7245; }
.check-confirm input { margin: 0; cursor: pointer; }

/* ---------- Финансовое обеспечение туроператора ----------
   Приложение № 1 к договору собирается отсюда; если сведения
   устарели, отвечает агентство. Поэтому состояние видно сразу. */
.fo-state {
  padding: 11px 13px; margin-bottom: 12px; border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--muted, #9aa3b2); font-size: var(--ш-13);
}
.fo-state strong { display: block; }
.fo-state span { color: var(--muted, #6b7280); font-size: var(--ш-12-5); }
.fo-state.tone-green { border-left-color: #2e9e5b; background: rgba(46,158,91,0.07); }
.fo-state.tone-amber { border-left-color: #d99100; background: rgba(217,145,0,0.08); }
.fo-state.tone-rose  { border-left-color: #d84a5a; background: rgba(216,74,90,0.08); }
.fo-state .row-actions { margin-top: 7px; }

.fo-missing, .fo-ready {
  padding: 9px 12px; margin-bottom: 12px; border-radius: 8px; font-size: var(--ш-12-5);
}
.fo-missing { background: rgba(216,74,90,0.09); color: #a32b3a; }
.fo-ready { background: rgba(46,158,91,0.09); color: #1f7245; }

.fo-group { margin: 16px 0 2px; font-size: var(--ш-13); }
.fo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fo-field { display: grid; gap: 3px; }
.fo-field.wide { grid-column: 1 / -1; }
.fo-field > span { font-size: var(--ш-11-5); color: var(--muted, #6b7280); }
.fo-field input, .fo-field select, .fo-field textarea {
  padding: 6px 9px; font: inherit; font-size: var(--ш-13);
  border: 1px solid var(--line, #d7dce5); border-radius: 7px; width: 100%;
}
.fo-field.need input, .fo-field.need select, .fo-field.need textarea {
  border-color: #d84a5a; background: rgba(216,74,90,0.05);
}
.fo-who { font-style: normal; font-size: var(--ш-10-5); color: var(--muted, #9aa3b2); }
.fo-multi { display: grid; gap: 3px; font-size: var(--ш-12-5); }
.fo-log { margin-top: 14px; font-size: var(--ш-12); }
.fo-log summary { cursor: pointer; color: var(--muted, #6b7280); }
.fo-log ul { margin: 6px 0 0; padding-left: 18px; }

.fo-warn {
  padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; font-size: var(--ш-12-5);
  background: rgba(217,145,0,0.1); border: 1px solid rgba(217,145,0,0.4);
}
.fo-warn.hard { background: rgba(216,74,90,0.09); border-color: rgba(216,74,90,0.45); }
.fo-warn div { margin-bottom: 3px; }

/* Кого надо сверить: обеспечение кончается или уже истекло */
.fo-expiring {
  padding: 11px 13px; margin-bottom: 12px; border-radius: 9px;
  background: rgba(217,145,0,0.09); border: 1px solid rgba(217,145,0,0.35);
}
.fo-expiring > strong { display: block; margin-bottom: 6px; font-size: var(--ш-13); color: #8f6100; }
.fo-exp-row {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  padding: 4px 8px; margin-bottom: 2px; border: none; border-radius: 6px;
  background: transparent; cursor: pointer; font-size: var(--ш-12-5); text-align: left;
}
.fo-exp-row:hover { background: rgba(255,255,255,0.7); }
.fo-exp-row i { font-style: normal; color: #8f6100; white-space: nowrap; }
.print-note { font-size: var(--ш-11); color: #555; margin-top: 4px; }

/* Расхождения перед применением: смена страховщика или размера
   обеспечения — событие, о котором надо узнать до записи. */
.fo-diff { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; margin: 8px 0; }
.fo-diff article {
  padding: 8px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px;
  font-size: var(--ш-12-5);
}
.fo-diff article.big { border-color: #d99100; background: rgba(217,145,0,0.06); }
.fo-diff strong { display: block; margin-bottom: 3px; }
.fo-diff .was { color: var(--muted, #6b7280); text-decoration: line-through; }
.fo-diff .now { color: #1f7245; }

/* ---------- Уведомления: «ознакомлен» и журнал ----------
   Уведомления пересчитываются из данных, поэтому «прочитано» —
   это отдельная отметка, а не галочка на записи. Кнопка убирает
   уведомление из колокольчика, но оно остаётся в журнале. */
.notice-row { padding-bottom: 10px; }
.notice-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Правки задним числом: галочка слева, чтобы убирать пачкой */
.edit-pick-all {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 2px;
  font-size: var(--ш-12-5);
  color: var(--muted);
  cursor: pointer;
}
.edit-pick-all input { width: 15px; height: 15px; cursor: pointer; }
.edit-list { list-style: none; padding-left: 0; }
.edit-list .edit-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 8px;
}
.edit-list .edit-row.picked { background: rgba(217,145,0,0.08); }
.edit-pick { display: flex; padding-top: 2px; cursor: pointer; }
.edit-pick input { width: 15px; height: 15px; cursor: pointer; }
.edit-body { flex: 1; min-width: 0; }
.notice-foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.secondary-btn.small { padding: 4px 10px; font-size: var(--ш-12); }

/* ---------- «Мой день»: столбцы кликаются целиком ----------
   Плитка показывает шесть строк, остальное раньше было тупиком.
   Заголовок и «и ещё N» уводят в брони с готовым фильтром. */
.cs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.cs-head h4 { margin: 0; }
.cs-head i {
  font-style: normal;
  font-size: var(--ш-12);
  color: var(--muted);
  opacity: 0;
  transition: opacity .12s;
}
.cs-head:hover i { opacity: 1; }
.cs-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--ш-12);
  text-align: left;
  cursor: pointer;
}
.cs-more:hover { color: var(--text); }

/* ---------- База знаний: разделы ----------
   Раздел — путь через косую черту, а не отдельная сущность:
   появляется с первой статьёй, исчезает с последней. */
.kb-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.kb-sep { color: var(--muted); }
.kb-sections { margin-bottom: 10px; }
.kb-section {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 6px 6px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.kb-section:hover { border-color: var(--sea-deep); }
.kb-section i {
  font-style: normal;
  font-size: var(--ш-12);
  color: var(--muted);
}

/* Подпись у суммы в «Ждём оплату»: срок из планового платежа
   или пометка, что это просто остаток по договору. */
.cs-when {
  display: block;
  font-weight: 400;
  font-size: var(--ш-11);
  color: var(--muted);
}
.cs-when.late { color: var(--rose); }

/* Брони без срока оплаты: не «ждём деньги», а «непонятно, когда
   их ждать». Поэтому отдельной строкой и заметно. */
.cs-alarm {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  text-align: left;
  background: var(--amber-soft, rgba(255, 193, 7, .12));
  border: 1px solid var(--amber, #e6a700);
  border-radius: 10px;
  cursor: pointer;
}
.cs-alarm.hot {
  background: var(--rose-soft, rgba(220, 53, 69, .12));
  border-color: var(--rose, #dc3545);
}
.cs-alarm strong { display: block; margin-bottom: 2px; }
.cs-alarm span { font-size: var(--ш-12); color: var(--muted); }

/* Пометка о наборе, которым отобран список броней */
.set-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.set-note span { font-size: var(--ш-12); color: var(--muted); }

/* Кнопки под пунктом в «Что требует внимания» */
.attention-acts {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.primary-btn.small,
.secondary-btn.small { padding: 4px 10px; font-size: var(--ш-12); }

/* Пункт «пока не срочно» в «Что требует внимания» */
.attention-item.info { opacity: .75; }
.attention-item.info .attention-mark { color: var(--muted); }

/* ---------- Строка документа: галочка, файл, действия ----------
   Загрузка сама ставит отметку, поэтому отметка и файл всегда
   рядом и всегда согласованы. */
.doc-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--card);
}
.doc-line.ready { border-color: var(--green, #2e9e5b); }
.doc-mark-btn {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  cursor: pointer;
}
.doc-line.ready .doc-mark-btn {
  background: var(--green, #2e9e5b);
  border-color: var(--green, #2e9e5b);
  color: #fff;
}
.doc-line-body { flex: 1 1 auto; min-width: 0; }
.doc-line-body strong { display: block; }
.doc-line-body small {
  display: block;
  color: var(--muted);
  font-size: var(--ш-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-line-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.doc-contract-acts { margin: 6px 0 14px; }

/* ---------- Паспорта туриста: два слота ---------- */
.pass-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.pass-slot {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.pass-slot.filled {
  border-style: solid;
  background: var(--card);
}
.pass-slot strong { display: block; margin-bottom: 4px; }
.pass-slot-empty,
.pass-slot-file i {
  display: block;
  font-size: var(--ш-12);
  font-style: normal;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Отметка проверки ИИ. Она не заменяет человека — так и написано. */
.pass-ai {
  padding: 8px 12px;
  border-radius: 10px;
  margin: 8px 0;
  border: 1px solid var(--line);
}
.pass-ai.ok { border-color: var(--green, #2e9e5b); }
.pass-ai.warn { border-color: var(--amber, #e6a700); }
.pass-ai strong { display: block; }
.pass-ai span { font-size: var(--ш-12); color: var(--muted); }

/* Обязательное поле: рамкой, а не только текстом */
.field-cell.need input,
.field-cell.need select { border-color: var(--amber, #e6a700); }
.need-mark {
  font-style: normal;
  font-size: var(--ш-11);
  color: var(--amber, #e6a700);
}
.need-social {
  grid-column: 1 / -1;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--amber, #e6a700);
  font-size: var(--ш-12);
}

/* Выбор сотрудников в отчётах: список плюс выбранные строкой */
.staff-pick { min-width: 240px; }
.staff-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Выбор договора ----------
   Пять бланков под разные случаи. Выбирают не по названию,
   а по подсказке: когда этот договор и почему именно он. */
.contract-pick { display: grid; gap: 10px; }
.contract-option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.contract-option:hover { border-color: var(--sea-deep); }
.contract-option strong { display: block; margin-bottom: 4px; }
.contract-option strong i {
  font-style: normal;
  font-size: var(--ш-11);
  color: var(--muted);
  font-weight: 400;
}
.contract-option span { display: block; font-size: var(--ш-13); }
.contract-option em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: var(--ш-12);
  color: var(--muted);
}
.contract-warn {
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--amber, #e6a700);
  border-radius: 10px;
}
.contract-warn strong { display: block; }
.contract-warn span { font-size: var(--ш-12); color: var(--muted); }
.contract-body { white-space: pre-wrap; }

/* Кликабельные цифры в сводках календаря */
.cash-summary.clickable button {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
}
.cash-summary.clickable button:hover strong { text-decoration: underline; }

/* Дни рождения туристов — повод для касания, а не поздравление своих */
.birthday-tile {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.birthday-tile:hover { border-color: var(--sea-deep); }
.birthday-tile strong { display: block; }
.birthday-tile span { font-size: var(--ш-12); color: var(--muted); }


/* ---------- Журнал СМС ----------
   Короткие сообщения читаются лентой, а не таблицей: текст в них
   и есть главное, а колонок было бы больше, чем содержания. */
.sms-list { display: grid; gap: 8px; margin-top: 10px; }
.sms-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sms-row.failed { border-color: rgba(190,60,60,0.45); background: rgba(190,60,60,0.05); }
.sms-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sms-top strong { font-size: var(--ш-14); }
.sms-when { margin-left: auto; font-size: var(--ш-12); color: var(--muted); }
.sms-row p { margin: 6px 0 0; font-size: var(--ш-13); line-height: 1.5; }
.sms-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.sms-foot small { font-size: var(--ш-12); color: var(--muted); }
.sms-foot small.danger { color: var(--rose); }

/* ---------- Предупреждения системы в карточке брони ----------
   Полоса сверху: что висит, сколько дней и знакомился ли кто-нибудь.
   Не «важное вообще», а конкретный незакрытый вопрос по этой брони. */
.booking-warn-strip { display: grid; gap: 6px; margin-bottom: 10px; }
.booking-warn-strip article {
  padding: 8px 12px;
  border: 1px solid rgba(217, 145, 0, 0.45);
  border-left: 3px solid #d99100;
  border-radius: 8px;
  background: rgba(217, 145, 0, 0.07);
}
.booking-warn-strip strong { display: block; font-size: var(--ш-13); }
.booking-warn-strip span { font-size: var(--ш-12); color: var(--muted); }

/* ---------- Вход в личный кабинет туриста ----------
   Отдельная короткая форма: два поля, которые человек помнит. */
.guest-login { max-width: 420px; margin: 0 auto; }
.guest-field { display: block; margin: 14px 0; }
.guest-field span { display: block; font-size: var(--ш-13); color: var(--muted); margin-bottom: 5px; }
.guest-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: var(--ш-16);
}
.guest-login .primary-btn { width: 100%; padding: 13px; font-size: var(--ш-16); }
.guest-error { color: var(--rose); font-size: var(--ш-13); margin: 8px 0 0; }
.guest-hint { color: var(--muted); font-size: var(--ш-12-5); margin-top: 12px; }

/* Выбор вложений в письме с документами */
.docs-pick { display: grid; gap: 5px; margin: 8px 0; }
.docs-pick label { display: flex; align-items: center; gap: 7px; font-size: var(--ш-13); }
.docs-pick i { color: var(--muted); font-style: normal; font-size: var(--ш-12); }

/* ---------- Что отправить туристу ----------
   Подсказка в карточке брони: письма, которые пора отправить,
   и отметки о тех, что уже ушли. */
.mail-todo {
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.mail-todo-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mail-todo-row > span { font-size: var(--ш-12-5); color: var(--muted); }
.mail-todo-sent { margin-top: 6px; font-size: var(--ш-12); color: var(--muted); }
.mail-todo-warn { margin: 0 0 6px; font-size: var(--ш-12-5); color: var(--rose); }

/* Граница автоматики над вкладками автоматизации */
.auto-since {
  margin: 8px 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: var(--ш-12-5);
  color: var(--muted);
  line-height: 1.5;
}

/* Подтверждение поступления денег */
.confirm-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 8px 0 12px; padding: 9px 12px;
  border: 1px solid rgba(217,145,0,0.45); border-left: 3px solid #d99100;
  border-radius: 8px; background: rgba(217,145,0,0.07); font-size: var(--ш-13);
}
.cash-summary div.warn strong { color: #d99100; }
.cash-summary div.warn em { display: block; font-style: normal; font-size: var(--ш-12); color: var(--muted); }
small.warn-line { display: block; color: #b5730a; font-size: var(--ш-11-5); }
small.ok-line { display: block; color: var(--green, #15803d); font-size: var(--ш-11-5); }
.icon-line.ok-line { color: var(--green, #15803d); }

/* Слоты файлов в «Приложено к брони» */
.doc-lines.slots { margin-bottom: 10px; }
.doc-lines.slots .doc-line { border-style: dashed; }
.doc-lines.slots .doc-line.ready { border-style: solid; }

/* ---------- Путь брони ----------
   Цепочка шагов, которые загораются сами по фактам. Серое — ещё не
   сделано, зелёное — сделано, жёлтое — то, чем заниматься сейчас. */
.booking-path {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.path-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.path-head span { font-size: var(--ш-12); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.path-head b { font-size: var(--ш-13-5); }
.path-head i { font-style: normal; font-size: var(--ш-12); color: var(--muted); }
.path-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.path-step {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--muted);
  font-size: var(--ш-12);
  line-height: 1.25;
}
.path-step i { font-style: normal; font-size: var(--ш-10-5); opacity: .75; }
.path-step.done {
  background: rgba(21, 128, 61, 0.09);
  border-color: rgba(21, 128, 61, 0.35);
  color: #15803d;
}
.path-step.now {
  background: rgba(217, 145, 0, 0.12);
  border-color: rgba(217, 145, 0, 0.5);
  color: #a8710b;
  font-weight: 600;
}

/* Кнопка «+ номер у ТО» рядом с номерами броней */
.strip-no.add {
  border-style: dashed;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
}
.strip-no.add:hover { color: var(--metal-mid); }

/* Номер у туроператора можно нажать и исправить — показываем это
   пунктиром под номером, а не отдельной кнопкой: место в шапке
   дорогое, а править номер приходится редко. */
.strip-no.правимый {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}
.strip-no.правимый:hover { color: var(--metal-mid); border-bottom-color: var(--metal-mid); }

/* ---------- Закрытые персональные данные ----------
   Телефон, почта и паспорт по умолчанию скрыты: на экране нечего
   снимать. Открывается по одному, каждое открытие считается. */
.masked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.masked .reveal {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--metal-mid);
  font-size: var(--ш-10-5);
  line-height: 1;
  padding: 3px 7px;
  cursor: pointer;
}
.masked .reveal:hover { background: var(--surface); color: var(--text); }
.edit-closed { padding: 7px 0; }
.модалка .блокировка p { margin: 0 0 8px; }

/* Журнал срабатываний защиты в настройках */
.zaschita-log { margin: 8px 0; font-size: var(--ш-12-5); }
.zaschita-log p { margin: 0 0 4px; color: var(--muted); }
.zaschita-log b { color: var(--text); }

/* Кнопка добавления номера у ТО — мельче, чтобы не спорила с номерами */
.strip-no.add.tiny {
  padding: 2px 8px;
  font-size: var(--ш-10-5);
  opacity: .7;
}
.strip-no.add.tiny:hover { opacity: 1; }

/* ============================================================
   БАЗА ЗНАНИЙ: КАРТОЧКИ И ЧТЕНИЕ

   Статью открывают, чтобы прочитать. Значит и выглядеть она должна
   как статья: колонка нормальной ширины, крупный текст, воздух
   между абзацами. Алгоритм — шагами, шкала — строками с баллами.
   ============================================================ */
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.knowledge-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.knowledge-card:hover { border-color: var(--metal-mid); transform: translateY(-1px); }
.knowledge-card .knowledge-head {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px; border: 0; background: transparent; cursor: pointer;
}
.kb-tag {
  display: block; font-size: var(--ш-11); letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.kb-tag i { font-style: normal; }
.kb-ai { color: #0f766e; }
.kb-draft { color: #b5730a; }
.knowledge-card strong { display: block; font-size: var(--ш-15); line-height: 1.35; margin-bottom: 6px; }
.knowledge-card p { margin: 0; font-size: var(--ш-12-5); line-height: 1.5; color: var(--muted); }
.kb-card-foot { display: block; margin-top: 10px; font-size: var(--ш-11-5); font-style: normal; color: var(--muted); }

/* ---- сама статья ---- */
.kb-article { margin-top: 10px; }
.kb-article-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.kb-article-acts { display: flex; gap: 8px; align-items: center; }
.kb-article-head { max-width: 720px; margin: 0 auto 22px; }
.kb-article-head h1 {
  margin: 4px 0 8px; font-size: var(--ш-30); line-height: 1.2; letter-spacing: -.4px;
}
.kb-meta { font-size: var(--ш-12-5); color: var(--muted); }
.kb-read { max-width: 720px; margin: 0 auto; font-size: var(--ш-16); line-height: 1.7; }
.kb-read p { margin: 0 0 16px; }
.kb-read .kb-h1 {
  margin: 34px 0 14px; font-size: var(--ш-21); line-height: 1.3; letter-spacing: -.2px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.kb-read .kb-h2 { margin: 26px 0 10px; font-size: var(--ш-17); line-height: 1.35; }
.kb-read .kb-list { margin: 0 0 16px; padding-left: 20px; }
.kb-read .kb-list li { margin-bottom: 7px; }
.kb-read .kb-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
.kb-read .kb-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.kb-read .kb-steps li:last-child { border-bottom: 0; }
.kb-step-no {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 118, 110, .1); color: #0f766e;
  font-size: var(--ш-13); font-weight: 700;
}
.kb-score {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 8px; font-size: var(--ш-14-5);
}
.kb-score.yes { background: rgba(21, 128, 61, .07); }
.kb-score.no { background: rgba(180, 35, 24, .05); color: var(--muted); }
.kb-score-no {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ш-12-5); font-weight: 700;
}
.kb-score.yes .kb-score-no { background: rgba(21, 128, 61, .15); color: #15803d; }
.kb-score.no .kb-score-no { background: rgba(180, 35, 24, .12); color: #b42318; }
.kb-editor { max-width: 820px; margin: 0 auto; }
.kb-empty { color: var(--muted); }
@media (max-width: 700px) {
  .kb-article-head h1 { font-size: var(--ш-24); }
  .kb-read { font-size: var(--ш-15-5); }
}

/* Шаги пути, которые отмечает человек, а не система */
.path-step.hand {
  border-style: dashed;
  cursor: pointer;
  font: inherit;
  font-size: var(--ш-12);
}
.path-step.hand:hover { border-color: var(--metal-mid); color: var(--text); }
.path-step.hand i { opacity: .8; }

/* Выбор себя на экране входа */
.auth-hint.small { margin-top: 6px; font-size: var(--ш-12); }
.auth-form select[name="login"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: var(--ш-15);
  background: var(--surface);
}

/* Строки утренней сводки — кликабельные */
.digest-list .digest-link {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 2px 0;
  font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.digest-list .digest-link:hover { border-bottom-color: var(--line); color: var(--metal-mid); }

/* ============================================================
   ТЕЛЕФОН: НИЧЕГО НЕ УЕЗЖАЕТ ЗА КРАЙ

   Сетки в системе рассчитаны на широкий экран: у колонок задана
   наименьшая ширина, и на трёхсотпиксельном телефоне их сумма
   просто не помещается — строки уходили вправо, за край.

   Здесь все такие сетки складываются в одну колонку. Правило
   общее, а не для каждого экрана отдельно: иначе следующая новая
   таблица опять уедет, и заметят это снова на телефоне.
   ============================================================ */
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Любая сетка — в одну колонку */
  .sales-plan-row,
  .form-grid, .edit-grid, .modal-facts, .booking-criteria,
  .stat-grid, .scenario-grid, .plan-list, .wide-list,
  .tourist-cards, .knowledge-grid, .cash-summary,
  .booking-list-summary, .settings-grid, .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  /* Поля и вводы — на всю ширину, без наименьших размеров */
  .plan-field, .plan-field input, .plan-input,
  .field-cell, .field-cell input, .field-cell select, .field-cell textarea,
  .booking-criteria label, .booking-criteria select, .booking-criteria input {
    min-width: 0 !important;
    width: 100% !important;
  }
  .plan-row-fields { flex-direction: column; align-items: stretch; }

  /* Длинные строки переносятся, а не растягивают экран */
  .kb-read, .article-body, .modal-text, .digest-list, .note-links,
  .path-steps, .strip-no, .knowledge-card p {
    overflow-wrap: anywhere;
  }

  /* Таблицы, которые не превратились в карточки, — со своей прокруткой */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Полосы кнопок над карточкой не вылезают вбок */
  .booking-header-actions, .head-actions, .row-actions, .panel-foot {
    flex-wrap: wrap;
  }
  /* Строка «Назад» + кнопки: на телефоне она не помещалась в ширину
     и уезжала вправо вместе с «Передать в сервис» и «Удалить бронь».
     Переносим саму строку, кнопкам даём всю ширину и по две в ряд. */
  .booking-header-line { flex-wrap: wrap; }
  .booking-header-line > .back-link { flex: 1 0 100%; }
  .booking-header-line > .booking-header-actions {
    flex: 1 1 100%; min-width: 0; width: 100%; flex-wrap: wrap; justify-content: flex-start;
  }
  .booking-header-actions > button {
    white-space: normal; flex: 1 1 calc(50% - 8px); min-width: 0; text-align: center;
  }
  .booking-header-actions > .link-btn { flex: 1 1 100%; }
}

/* ---------- Подпись на каждой странице договора ----------
   На бумаге договор подписывают постранично: так лист нельзя
   подменить. В печатной форме это колонтитул — браузер повторяет
   закреплённый внизу блок на каждом листе. На экране он не нужен. */
.page-sign { display: none; }
@media print {
  @page { margin-bottom: 24mm; }
  .page-sign {
    display: flex; align-items: flex-end; gap: 6mm;
    position: fixed; left: 0; right: 0; bottom: -18mm;
    border-top: 1px solid #ccc; padding-top: 2mm;
    font-size: 8pt; color: #444;
  }
  .page-sign-img { max-height: 14mm; max-width: 40mm; }
  .page-sign-name { padding-bottom: 2mm; }
}

/* ============================================================
   ПОДСКАЗЧИК ПО СИСТЕМЕ
   Кнопка «?» в шапке: человек пишет своими словами, что ему надо
   сделать, и получает три-четыре шага — где нажать.
   ============================================================ */
.help-btn svg { width: 20px; height: 20px; fill: currentColor; }
.help-btn { color: var(--teal); }

.help-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 4px;
}
.help-quick .chip {
  cursor: pointer; border: 1px solid var(--line); background: var(--surface-soft);
  border-radius: 999px; padding: 5px 11px; font-size: var(--ш-12-5); color: var(--ink);
}
.help-quick .chip:hover { background: #fff; border-color: var(--metal-mid); }

.help-answer {
  margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 8px; background: var(--surface-soft);
  line-height: 1.55; font-size: var(--ш-14); white-space: normal;
}

/* ============================================================
   КОМАНДА ДЛЯ ВСЕХ И СВОЯ КАРТОЧКА
   ============================================================ */
.mate-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-top: 12px;
}
.mate-card {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: 12px;
}
.mate-card.mine { border-color: var(--metal-mid); background: var(--sand-soft); }
.mate-photo {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-soft); color: var(--teal); font-weight: 700;
}
.mate-photo.empty { border: 1px solid var(--line); }
.mate-main { min-width: 0; }
.mate-main strong { display: block; font-size: var(--ш-14); }
.mate-main small { display: block; color: var(--muted); margin-top: 2px; }
.mate-me { font-style: normal; font-size: var(--ш-11); color: var(--teal); }
.mate-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: var(--ш-12-5); }
.mate-lines a { color: var(--teal); text-decoration: none; }
.mate-lines a:hover { text-decoration: underline; }
.mate-lines span { color: var(--muted); }

.my-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.my-card-photo { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.my-card-side { min-width: 0; }
@media (max-width: 700px) {
  .my-card { grid-template-columns: minmax(0, 1fr); }
  .mate-card { grid-template-columns: 44px minmax(0, 1fr); }
  .mate-card .mate-acts { grid-column: 1 / -1; }
  .mate-photo { width: 44px; height: 44px; }
}

/* ============================================================
   СТРОКА ЗАДАЧИ НА ТЕЛЕФОНЕ

   На айфоне дата наезжала на название задачи: строка задачи —
   это <button>, а WebKit раскладку в сетку внутри кнопки не
   выполняет и складывает все части в одно место. Читать
   невозможно, а «Задачи на сегодня» — первое, что открывают утром.

   Поэтому на узком экране никакой сетки внутри кнопки: обычные
   блоки друг под другом. Наложиться они не могут в принципе —
   ни в одном браузере.
   ============================================================ */
@media (max-width: 900px) {
  .task-line-main,
  .task-list .task-line .task-line-main,
  .staff-body .task-line .task-line-main {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .task-line-main > span {
    display: block;
    min-width: 0;
    margin-top: 4px;
  }
  .task-line-main > span:first-child { margin-top: 0; }
  /* Дата и время — в одну строчку, они короткие */
  .task-line .task-when {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  }
  .task-line .task-when strong { display: inline; font-size: var(--ш-12-5); }
  .task-line .task-when small { font-size: var(--ш-11); }
  .task-line .task-name { font-size: var(--ш-13-5); }
  .task-line .task-marks { display: flex; flex-wrap: wrap; gap: 4px; }

  /* Та же беда в карточках «Мой день» */
  .task-item { grid-template-columns: minmax(0, 1fr); }
}

/* Подпись и печать в реквизитах печатного договора: печати нужно
   место сверху, иначе оттиск наезжает на строку подписи */
.print-signs .sign-line { display: block; margin-top: 16px; }
.print-signs .stamp-line { display: block; margin-top: 38px; }
/* Печать и подпись — в одном месте, у строки подписи: так их и
   ставят на бумаге. Натуральная величина: печать 42 мм (≈159 точек). */
.print-signs .sign-line { padding-top: 54px; }
.print-signs .sign-img { height: auto; max-width: 150px; max-height: 60px; top: 16px; bottom: auto; }
.print-signs .stamp-img { width: 159px; top: 0; left: 22px; }

/* ============================================================
   ЦЕРЕМОНИЯ ОТКРЫТИЯ

   Систему писали три года. Человек, который входит в неё первый
   раз, должен это почувствовать, а не просто увидеть список задач.
   Показывается ровно один раз каждому — отметка хранится в его
   карточке, а не в браузере, поэтому со второго устройства
   церемония не повторится.
   ============================================================ */
.ceremony {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 34px 20px 40px;
  overflow: hidden;
  color: #eaf7f6;
  background: radial-gradient(120% 82% at 50% 44%, #0a5a63 0%, #05353c 42%, #04262c 68%, #01161a 100%);
  animation: ceremony-in 500ms ease both;
}
.ceremony.open { display: flex; }
.ceremony.leaving { animation: ceremony-out 700ms ease both; }
@keyframes ceremony-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ceremony-out { to { opacity: 0; visibility: hidden; } }

.ceremony::before {
  content: "";
  position: absolute;
  left: 50%; top: 47%;
  width: min(1150px, 140vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43, 194, 199, 0.2) 0%, rgba(43, 194, 199, 0.06) 42%, rgba(43, 194, 199, 0) 66%);
  pointer-events: none;
}

.cer-top {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
/* Сердце золотится тем же переливом, что золотые кнопки системы */
.cer-heart {
  width: 72px;
  aspect-ratio: 234 / 192;
  background: linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
  background-size: 280% 100%;
  -webkit-mask: url("assets/heart_gold.png") center / contain no-repeat;
  mask: url("assets/heart_gold.png") center / contain no-repeat;
  animation: cer-shimmer 5s linear infinite;
}
@keyframes cer-shimmer {
  from { background-position: 190% 0; }
  to   { background-position: -90% 0; }
}
.cer-eyebrow {
  font-size: var(--ш-12); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--metal-glow);
}
.cer-sub { font-size: var(--ш-13); color: #8fb9bb; }

.cer-stage {
  position: relative; z-index: 2;
  width: 100%; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
}

.cer-plaque {
  position: relative;
  width: min(620px, 92vw);
  padding: 40px 30px 34px;
  text-align: center;
  border-radius: 4px;
  background: linear-gradient(180deg, #07424a 0%, #04282e 100%);
  box-shadow: inset 0 1px 0 rgba(43, 194, 199, 0.4), 0 30px 70px rgba(0, 0, 0, 0.55);
}
.cer-plaque::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 5px; z-index: -1;
  background: linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 40%, var(--metal-glow) 50%, var(--metal-mid) 60%, var(--metal-dark) 100%);
  background-size: 240% 100%;
}
.cer-kicker {
  font-size: var(--ш-11); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--metal-glow); margin-bottom: 14px;
}
.cer-title {
  font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.12; text-wrap: balance;
  color: #eaf7f6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(43, 194, 199, 0.25);
}
.cer-date {
  margin-top: 16px; font-size: var(--ш-12-5);
  letter-spacing: 0.16em; text-transform: uppercase; color: #8fb9bb;
}

/* ---- лента ---- */
.cer-ribbon {
  position: absolute; left: -5vw; right: -5vw; top: 50%;
  height: 80px; margin-top: -40px; z-index: 4; cursor: pointer;
}
.ceremony.cut .cer-ribbon { cursor: default; pointer-events: none; }
/* Половины лежат внахлёст и без зубчатого края: до разреза лента
   должна выглядеть цельной, без шва посередине. Неровный край
   появляется в тот момент, когда её режут, — тогда он и уместен. */
.cer-half {
  position: absolute; top: 0; height: 100%; width: 50.4%;
  background: linear-gradient(180deg,
    #57061a 0%, #8d0d22 9%, #b8112e 20%, #d8324d 30%, #ef6b7c 37%,
    #cd2242 47%, #a8142f 60%, #7c0a20 78%, #4f0515 92%, #38030e 100%);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5);
  transition: transform 1100ms cubic-bezier(0.22, 0.9, 0.3, 1), opacity 1100ms ease;
}
.cer-half.left { left: 0; transform-origin: left center; }
.cer-half.right { right: 0; transform-origin: right center; }

/* Блик один на всю ленту, а не по одному на половину: так он
   проходит её насквозь, как по цельному полотну. */
.cer-sheen { position: absolute; inset: 0; overflow: hidden; z-index: 5; pointer-events: none; }
.cer-sheen::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 16%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0) 100%);
  animation: cer-glide 6s linear infinite;
}
@keyframes cer-glide {
  from { transform: translateX(-160%) skewX(-12deg); }
  to   { transform: translateX(760%) skewX(-12deg); }
}
.ceremony.cut .cer-sheen { display: none; }
.ceremony.cut .cer-half.left {
  clip-path: polygon(0 0, 100% 0, 97.5% 22%, 100% 44%, 96.8% 70%, 100% 100%, 0 100%);
  transform: translate(-14%, 46%) rotate(-7deg); opacity: 0.92;
}
.ceremony.cut .cer-half.right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 3.2% 70%, 0 44%, 2.5% 22%);
  transform: translate(14%, 46%) rotate(7deg); opacity: 0.92;
}

/* ---- низ ---- */
.cer-bottom {
  position: relative; z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: 100%;
}
.cer-cut {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 28px; border-radius: 999px;
  border: 1px solid var(--metal-glow);
  background: linear-gradient(108deg, var(--metal-dark) 0%, var(--metal-mid) 40%, var(--metal-glow) 50%, var(--metal-mid) 60%, var(--metal-dark) 100%);
  background-size: 240% 100%;
  color: #fff; font-family: inherit; font-size: var(--ш-15); font-weight: 600;
  letter-spacing: 0.06em; cursor: pointer;
  box-shadow: 0 14px 32px rgba(6, 47, 53, 0.5);
}
.cer-cut svg { width: 21px; height: 21px; fill: currentColor; }
.ceremony.cut .cer-cut, .ceremony.cut .cer-hint { display: none; }
.cer-hint { font-size: var(--ш-12); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(143, 185, 187, 0.75); }

.cer-reveal { display: none; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 900px; }
.ceremony.cut .cer-reveal { display: flex; animation: cer-rise 800ms 500ms both ease-out; }
@keyframes cer-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cer-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; width: 100%;
  background: rgba(43, 194, 199, 0.28);
  border: 1px solid rgba(43, 194, 199, 0.28);
}
.cer-fig { background: #04262c; padding: 14px 12px; text-align: center; }
.cer-fig b {
  display: block; font-size: clamp(19px, 2.4vw, 28px);
  color: var(--metal-glow); font-variant-numeric: tabular-nums;
}
.cer-fig span {
  display: block; margin-top: 5px; font-size: var(--ш-10-5);
  letter-spacing: 0.14em; text-transform: uppercase; color: #8fb9bb;
}
.cer-closing {
  font-size: clamp(14px, 1.9vw, 18px); line-height: 1.5;
  text-align: center; text-wrap: balance; max-width: 42ch; color: #eaf7f6;
}
.cer-go {
  padding: 15px 38px; border: 0; border-radius: 999px;
  background: linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
  background-size: 240% 100%;
  animation: cer-shimmer 6s linear infinite;
  color: #2a1d00; font-family: inherit; font-weight: 800; font-size: var(--ш-15);
  letter-spacing: 0.05em; cursor: pointer;
  box-shadow: 0 16px 40px rgba(229, 196, 101, 0.25);
}
#cerSparks { position: fixed; inset: 0; z-index: 7; pointer-events: none; }

@media (max-width: 640px) {
  .ceremony { padding: 24px 14px 30px; }
  .cer-ribbon { height: 58px; margin-top: -29px; }
  .cer-plaque { padding: 30px 18px 24px; }
  .cer-stage { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .cer-sheen::after, .cer-heart, .cer-go { animation: none; }
  .cer-half { transition: none; }
  .ceremony, .ceremony.leaving { animation: none; }
  .ceremony.cut .cer-reveal { animation: none; }
}

/* Поездка из нескольких договоров: соседние номера — ссылками
   в той же ячейке, чтобы строка осталась одна */
.trip-more { display: block; margin-top: 4px; color: var(--muted); line-height: 1.5; }
.trip-more .link-btn.tiny {
  font-size: var(--ш-11-5); padding: 0 2px; vertical-align: baseline;
}

/* Чего система не знает, она не выдаёт за ноль: приглушаем и
   подписываем, откуда взять настоящую цифру */
.booking-list-summary article.unknown strong,
.strip-cell.unknown strong { color: var(--muted); font-weight: 600; }
.booking-list-summary article.unknown small { display: block; font-size: var(--ш-10-5); color: var(--muted); margin-top: 2px; }

/* ============================================================
   КАНБАН ЗАДАЧ
   Колонки по срокам. Перетащил карточку правее — срок уехал.
   ============================================================ */
.task-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.task-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, background 160ms ease;
}
.task-col.late { background: rgba(200, 80, 60, 0.05); border-color: rgba(200, 80, 60, 0.25); }
.task-col.over { border-color: var(--metal-mid); background: var(--teal-pale); }
.task-col-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.task-col-head strong { font-size: var(--ш-13); }
.task-col-count {
  font-size: var(--ш-11-5); font-weight: 700; color: var(--metal-mid);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px;
}
.task-col-head small { flex: 1 0 100%; font-size: var(--ш-10-5); color: var(--muted); }
.task-col-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 40px; }
.task-col-empty { padding: 16px 12px; font-size: var(--ш-12); color: var(--muted); text-align: center; }

.task-card-mini {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(22, 63, 71, 0.05);
  cursor: grab;
}
.task-card-mini.dragging { opacity: 0.45; }
.task-card-mini.late { border-left: 3px solid var(--rose); }
.task-card-mini.done { opacity: 0.55; }
.task-card-open {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 11px 8px; font-family: inherit; color: inherit; cursor: pointer;
}
.task-card-when { font-size: var(--ш-11); font-weight: 600; color: var(--metal-mid); }
.task-card-title { font-size: var(--ш-13); line-height: 1.35; }
.task-card-marks { display: flex; flex-wrap: wrap; gap: 4px; }
.task-card-foot { font-size: var(--ш-11); color: var(--muted); }
.task-card-move {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 9px 9px;
}
.task-move {
  font-family: inherit; font-size: var(--ш-11);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-soft); color: var(--muted);
  padding: 3px 9px; cursor: pointer;
}
.task-move:hover { border-color: var(--metal-mid); color: var(--metal-mid); background: #fff; }

@media (max-width: 900px) {
  /* На телефоне колонки идут лентой вбок, а переносят кнопками:
     перетаскивать пальцем по такой сетке невозможно. */
  .task-board { grid-auto-flow: column; grid-auto-columns: 78vw; grid-template-columns: none; }
  .task-card-mini { cursor: default; }
}

/* Порядок разделов меню: список со стрелками — работает и мышью,
   и пальцем, в отличие от перетаскивания */
.menu-order { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.menu-order-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); padding: 7px 10px;
}
.menu-order-num { font-size: var(--ш-11-5); color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-order-row strong { font-size: var(--ш-13); font-weight: 500; }
.menu-order-acts { display: flex; gap: 4px; }
.menu-order-acts .icon-btn.small { width: 28px; height: 28px; font-size: var(--ш-13); }
.menu-order-acts .icon-btn[disabled] { opacity: 0.3; cursor: default; }

/* Акция, сделанная из письма: карточка читается целиком */
.promo-card.readable { padding: 0; }
.promo-open {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; color: inherit;
  padding: 12px 14px 8px;
  border-radius: inherit;
}
.promo-open:hover { background: var(--surface-soft); }
.promo-open:focus-visible { outline: 2px solid var(--metal-mid); outline-offset: -2px; }
.promo-card.readable .promo-foot { padding: 0 14px 11px; }
.promo-more {
  display: block; margin-top: 8px;
  font-size: var(--ш-11-5); font-weight: 600; color: var(--metal-mid);
}
.mail-meta-line { font-size: var(--ш-12); color: var(--muted); margin: 0 0 10px; }
.modal .mail-frame { width: 100%; min-height: 55vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Шаг пути, пройденный ещё до переноса в систему: отмечен, но
   видно, что следов в системе нет — система не выдаёт чужую
   работу за свою запись */
.path-step.before { opacity: 0.72; border-style: dashed; }
.path-step.before i { font-style: normal; opacity: 0.8; }

/* ============================================================
   ФОРМА КО-1 — ПРИХОДНЫЙ КАССОВЫЙ ОРДЕР
   Бланк унифицированный: слева ордер, справа отрывная квитанция.
   Вёрстка держит эту форму и на экране, и на печати.
   ============================================================ */
.ko1 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0;
  font-size: var(--ш-11-5);
  line-height: 1.45;
  color: #111;
  background: #fff;
  border: 1px solid #999;
}
.ko1-main { padding: 14px 16px; }
.ko1-cut {
  padding: 14px 16px;
  border-left: 1px dashed #777;
}
.ko1-form { text-align: right; font-size: var(--ш-10-5); margin-bottom: 10px; }
.ko1-org { display: grid; gap: 10px; margin-bottom: 10px; }
.ko1-field b { display: block; border-bottom: 1px solid #111; padding-bottom: 2px; font-weight: 700; }
.ko1-field i { display: block; font-style: normal; font-size: var(--ш-9-5); text-align: center; color: #444; }
.ko1-field.center b { text-align: center; }
.ko1-codes { border-collapse: collapse; margin: 0 0 10px auto; }
.ko1-codes td { border: 1px solid #111; padding: 2px 8px; font-size: var(--ш-10-5); }
.ko1-codes td:first-child { border: 0; text-align: right; padding-right: 8px; }
.ko1-no { border-collapse: collapse; margin: 0 0 10px auto; }
.ko1-no th, .ko1-no td { border: 1px solid #111; padding: 3px 12px; font-size: var(--ш-10-5); text-align: center; }
.ko1-title { text-align: center; font-size: var(--ш-13); margin: 10px 0; letter-spacing: 0.02em; }
.ko1-title small { font-weight: 400; font-size: var(--ш-11); }
.ko1-acc { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.ko1-acc th, .ko1-acc td { border: 1px solid #111; padding: 3px 4px; font-size: var(--ш-9-5); text-align: center; }
.ko1-acc td { height: 26px; font-size: var(--ш-11); }
.ko1-line {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px; align-items: end; margin-bottom: 7px;
}
.ko1-line span { font-size: var(--ш-11); }
.ko1-line b {
  font-weight: 400; border-bottom: 1px solid #111; padding-bottom: 1px; min-height: 16px;
  /* Длинное основание платежа переносим по словам, а не пускаем
     поверх соседней строки: в узкой квитанции оно занимает три
     строки, и раньше строки наезжали друг на друга. */
  overflow-wrap: anywhere; line-height: 1.3;
}
.ko1-cap { font-size: var(--ш-9-5); color: #444; text-align: center; margin: -4px 0 8px 126px; }

/* ---------- Квитанция уже ордера ----------
   Колонка отреза почти вдвое тоньше, и подписи полей в ней должны
   быть короче, иначе значению остаётся полоска в два слова. */
.ko1-cut .ko1-line { grid-template-columns: 76px minmax(0, 1fr); gap: 6px; }
.ko1-cut .ko1-cap { margin-left: 82px; }
.ko1-cut .ko1-sign-post { width: 76px; flex-basis: 76px; }
.ko1 * { box-sizing: border-box; }
.ko1-stamp { margin: 14px 0 10px; font-size: var(--ш-11); }
.ko1-sign { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.ko1-sign-post { width: 118px; flex: 0 0 118px; font-weight: 700; font-size: var(--ш-11); }
.ko1-sign-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ko1-sign-line { border-bottom: 1px solid #111; min-height: 16px; text-align: center; }
.ko1-sign-col i { font-style: normal; font-size: var(--ш-9); color: #444; text-align: center; padding-top: 1px; }

@media (max-width: 760px) {
  .ko1 { grid-template-columns: minmax(0, 1fr); }
  .ko1-cut { border-left: 0; border-top: 1px dashed #777; }
}
@media print {
  /* Квитанция — справа от ордера, по линии отреза: так выглядит
     бумажный бланк, и так менеджеру привычно его резать. Ширина
     листа при печати бывает меньше 760 точек, и сюда доставало
     мобильное правило «в одну колонку» — квитанция уезжала вниз. */
  .ko1 {
    width: 100%;
    border: 0; font-size: 9px; line-height: 1.18;
    display: grid !important;
    grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr) !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ko1-cut { border-left: 1px dashed #777 !important; border-top: 0 !important; }
  .ko1-main, .ko1-cut { padding: 5px 7px; min-width: 0; }
  .ko1-form { font-size: 8px; margin-bottom: 5px; }
  .ko1-org { gap: 4px; margin-bottom: 5px; }
  .ko1-field i, .ko1-sign-col i { font-size: 7px; }
  .ko1-codes, .ko1-no { margin-bottom: 5px; }
  .ko1-codes td, .ko1-no th, .ko1-no td { padding: 1px 4px; font-size: 8px; }
  .ko1-title { font-size: 10px; margin: 5px 0; }
  .ko1-title small { font-size: 8px; }
  .ko1-acc { margin-bottom: 6px; }
  .ko1-acc th, .ko1-acc td { padding: 2px; font-size: 7px; line-height: 1.1; }
  .ko1-acc td { height: 18px; font-size: 8px; }
  .ko1-line { grid-template-columns: 76px minmax(0, 1fr); gap: 4px; margin-bottom: 4px; }
  .ko1-line span { font-size: 8px; }
  .ko1-line b { min-width: 0; min-height: 11px; padding-bottom: 0; font-size: 8px; line-height: 1.12; overflow-wrap: anywhere; word-break: break-word; }
  .ko1-cut .ko1-line { grid-template-columns: 48px minmax(0, 1fr); gap: 3px; }
  .ko1-cut .ko1-cap { margin-left: 51px; font-size: 7px; margin-bottom: 4px; }
  .ko1-stamp { margin: 7px 0 5px; font-size: 8px; }
  .ko1-sign { gap: 4px; margin-top: 7px; }
  .ko1-sign-post, .ko1-cut .ko1-sign-post { width: 58px; flex-basis: 58px; font-size: 8px; }
  .ko1-sign-line { min-height: 11px; font-size: 8px; }
}

/* Поле отчёта, которое выбирать нельзя: у руководителя отдела
   срез задан правами, а не выпадающим списком */
.mini-fixed {
  display: inline-flex; align-items: center; height: 30px;
  padding: 0 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-soft); color: var(--ink); font-size: var(--ш-12-5);
}

/* Комиссия от оборота в отчёте — по той же шкале зон, что и
   комиссия отдельной брони: одинаковый цвет означает одинаковое */
.report-card.zone-bad  { border-left: 3px solid var(--zone-bad);  background: rgba(125, 31, 46, 0.06); }
.report-card.zone-low  { border-left: 3px solid var(--zone-low);  background: rgba(184, 64, 47, 0.06); }
.report-card.zone-mid  { border-left: 3px solid var(--zone-mid);  background: rgba(184, 134, 11, 0.08); }
.report-card.zone-good { border-left: 3px solid var(--zone-good); background: rgba(15, 111, 115, 0.06); }
.report-card.zone-bad  strong { color: var(--zone-bad); }
.report-card.zone-low  strong { color: var(--zone-low); }
.report-card.zone-mid  strong { color: var(--zone-mid); }
.report-card.zone-good strong { color: var(--zone-good); }
.report-card .zone-name {
  display: block; font-style: normal; font-size: var(--ш-11-5); font-weight: 600;
  margin-top: 2px;
}
.report-card.zone-bad  .zone-name { color: var(--zone-bad); }
.report-card.zone-low  .zone-name { color: var(--zone-low); }
.report-card.zone-mid  .zone-name { color: var(--zone-mid); }
.report-card.zone-good .zone-name { color: var(--zone-good); }

/* Редактор источников заявок */
.src-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.src-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); padding: 6px 10px;
}
.src-row.off { opacity: 0.6; }
.src-title {
  border: 1px solid transparent; border-radius: 6px;
  background: #fff; padding: 5px 8px; font-family: inherit; font-size: var(--ш-13); min-width: 0;
}
.src-title:focus { border-color: var(--metal-mid); outline: none; }
.src-count { font-size: var(--ш-11); color: var(--muted); white-space: nowrap; }
.src-on { font-size: var(--ш-11-5); white-space: nowrap; }
.src-lock { font-size: var(--ш-11); color: var(--metal-mid); white-space: nowrap; }
@media (max-width: 700px) {
  .src-row { grid-template-columns: minmax(0, 1fr); }
}

/* Отметку ИИ можно снять, когда разобрались: висящее без дела
   предупреждение приучает не читать предупреждения */
.pass-ai-acts { display: flex; justify-content: flex-end; margin-top: 6px; }
.pass-ai-acts .link-btn { font-size: var(--ш-11-5); }

/* Строка сверки, где значения разошлись */
.cal-table tr.row-warn td { background: rgba(184, 107, 88, 0.07); }
.cal-table tr.row-warn td:first-child { font-weight: 600; }

/* Просроченное по плану — прямо в итогах расчётов */
.settle-late { font-style: normal; color: var(--rose); font-weight: 600; margin-left: 8px; }
.settle-actions .secondary-btn.small { height: 28px; padding: 0 10px; font-size: var(--ш-12); }

/* Сколько турист должен доплатить: по договору и по курсу дня */
.rate-debt { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.rate-debt > strong { font-size: var(--ш-13); display: block; margin-bottom: 8px; }
.rate-debt-rows { display: grid; gap: 8px; }
.rate-debt-rows > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px; align-items: baseline;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); padding: 8px 11px;
}
.rate-debt-rows span { font-size: var(--ш-12); color: var(--muted); }
.rate-debt-rows b { font-size: var(--ш-14); font-variant-numeric: tabular-nums; }
.rate-debt-rows i {
  grid-column: 1 / -1; font-style: normal; font-size: var(--ш-11); color: var(--muted);
}
.rate-debt-diff.up { border-color: rgba(184, 107, 88, 0.45); background: rgba(184, 107, 88, 0.07); }
.rate-debt-diff.up b { color: var(--rose); }
.rate-debt-diff.down { border-color: rgba(15, 111, 115, 0.4); background: rgba(15, 111, 115, 0.06); }
.rate-debt-diff.down b { color: var(--green); }

/* Курс оператора неизвестен — считаем по ЦБ и прямо говорим об этом */
.rate-todo { display: block; margin-top: 4px; color: var(--rose); font-size: var(--ш-11); line-height: 1.45; }
.rate-todo .link-btn { font-size: var(--ш-11); padding: 0; }
.rate-note b { color: var(--ink); }

/* Форма турпутёвки у туроператора: отмечает менеджер вручную */
.strip-status.putevka button {
  font-family: inherit; font-size: var(--ш-12-5); cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; padding: 5px 10px; color: inherit; width: 100%; text-align: left;
}
.strip-status.putevka.todo button { border-color: rgba(184, 107, 88, 0.5); color: var(--rose); }
.strip-status.putevka.done button { border-color: rgba(15, 111, 115, 0.4); color: var(--green); }
.strip-status.putevka button:hover { border-color: var(--metal-mid); }

/* Валютная бронь глазами туриста: договор в рублях по курсу дня
   брони, остаток — по курсу дня оплаты */
.cur-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin: 12px 0 0;
  background: var(--line); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
}
.cur-line { background: #fff; padding: 10px 12px; display: grid; gap: 2px; }
.cur-line span { font-size: var(--ш-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cur-line b { font-size: var(--ш-16); font-variant-numeric: tabular-nums; }
.cur-line i { font-style: normal; font-size: var(--ш-11); color: var(--muted); line-height: 1.4; }
.cur-line.debt { background: var(--sand-soft); }
.cur-line.debt b { color: var(--gold-dark); }
.cur-line.today b { color: var(--metal-mid); }
.cur-line.done b { color: var(--green); }
.cur-strip.unknown .cur-line.today b { color: var(--rose); }

/* Курс упал — доплата всё равно по курсу договора */
.cur-strip.floor .cur-line.today b { color: var(--green); }

/* Название системы в подписи под логотипом выделяем — оно тут
   собственное имя, а не часть фразы */
.brand-sub b { font-weight: 700; color: var(--metal-mid); letter-spacing: 0.01em; }
.brand-sub small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--ш-10); }

/* Отдельные кабинеты не наследуют логотип агентства-владельца. */
.tenant-mode .brand { display: flex; align-items: center; gap: 10px; }
.tenant-mode .brand .brand-mark { display: grid; flex: 0 0 auto; }
.tenant-mode .brand-sub { margin-top: 0; min-width: 0; }
.tenant-mode .brand-sub b { overflow-wrap: anywhere; color: var(--ink); font-size: var(--ш-12); }
.tenant-mode .auth-wordmark {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  text-align: left;
}
.tenant-mode .auth-wordmark > span {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--metal-dark);
  color: #fff;
  font-weight: 700;
  font-size: var(--ш-21);
}
.tenant-mode .auth-wordmark strong { overflow-wrap: anywhere; font-size: var(--ш-18); }
.tenant-mode .auth-wordmark small { color: var(--muted); }

/* Хвосты переноса: видно, но в расчёт не идёт */
.set-note.tails { border-left: 3px solid var(--amber); background: var(--sand-soft); }
.plan-row.tail td { opacity: 0.75; }

/* ============================================================
   ЭКРАН «КУРСЫ ВАЛЮТ»

   Курс — это цена, а не справка, поэтому цифры крупные и стоят
   первыми, а объяснение, откуда они взялись, — рядом и мелким.
   ============================================================ */
.rate-hero {
  display: grid; gap: 10px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rate-hero-card {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--surface-soft);
  display: grid; gap: 2px; align-content: start;
}
.rate-hero-card span { font-size: var(--ш-11); color: var(--muted); }
.rate-hero-card strong { font-size: var(--ш-22); font-variant-numeric: tabular-nums; }
.rate-hero-card small { font-size: var(--ш-11); color: var(--muted); }
.rate-hero-card.warn { border-color: rgba(200, 80, 60, 0.45); background: rgba(200, 80, 60, 0.05); }
.rate-hero-card.warn strong { color: var(--rose); }

.table-wrap .rate-table { min-width: 620px; }
.rate-table td { vertical-align: middle; }
.rate-table .rate-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rate-table .rate-num strong { font-size: var(--ш-14); }
.rate-table .rate-act { text-align: right; white-space: nowrap; }

/* Операторы без курса — не таблица: их просто перечисляем,
   и каждый сразу открывает окно «вписать курс» */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-line {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  padding: 6px 12px; font: inherit; font-size: var(--ш-12); cursor: pointer;
}
.chip-line:hover { border-color: var(--metal-mid); background: var(--surface-soft); }

/* Заявки без движения. Цветом отделены те, что лежат больше
   недели: три дня — повод написать, неделя — повод объясниться. */
.hang-panel { border-color: rgba(200, 80, 60, 0.35); }
.hang-chip { font-variant-numeric: tabular-nums; }
/* Ссылка-чип выглядит и ведёт себя как кнопка, но остаётся
   ссылкой: её можно открыть в соседней вкладке, скопировать
   и кинуть коллеге. */
a.chip-line { display: inline-block; text-decoration: none; }
a.entity-link { text-decoration: none; }
a.entity-link:hover { text-decoration: underline; }
.modal-list a.entity-link.strong { font-weight: 600; }
.hang-chip.hot {
  border-color: rgba(200, 80, 60, 0.5); background: rgba(200, 80, 60, 0.07); color: var(--rose);
}
.hang-chip.hot:hover { background: rgba(200, 80, 60, 0.12); }

/* Пункт приёмки, пройденной ещё в U-ON: не зелёная галка и не
   красный крест — просто «было, следа не осталось» */
.check-item.было .check-mark { color: var(--muted); background: var(--surface-soft); }
.check-item.было strong { color: var(--muted); font-weight: 600; }

/* Кто поставил задачу — перед именем исполнителя, приглушённо:
   главное в строке всё-таки исполнитель и срок */
.task-from { font-style: normal; color: var(--muted); font-weight: 500; }

/* Заголовок страны в списке отелей: их две тысячи, и без
   разделителей список не читается */
.dir-country {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 8px; font-size: var(--ш-13); font-weight: 700;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.dir-country:first-child { margin-top: 4px; }
.dir-country i { font-style: normal; font-weight: 500; font-size: var(--ш-11-5); color: var(--muted); }

/* Удаление стоит особняком и не притворяется обычным действием */
.danger-link { color: var(--rose); }
.danger-link:hover { text-decoration: underline; }

/* Очередь писем: номер договора и даты тура видно сразу, чтобы
   отличить письмо к завтрашнему вылету от письма по поездке,
   которая была два года назад */
.pending-facts { display: block; font-size: var(--ш-11-5); color: var(--muted); }
.pending-facts .entity-link { font-size: var(--ш-11-5); }

/* Кусок письма, который поправили руками */
.letter-part.changed > span { color: var(--metal-mid); font-weight: 600; }
.letter-part textarea { font: inherit; font-size: var(--ш-12-5); }

/* Письмо целиком в окне просмотра: моноширинного не надо, но
   переносы строк должны сохраниться — иначе не видно абзацев */
.letter-preview {
  white-space: pre-wrap; font: inherit; font-size: var(--ш-12-5); line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin: 10px 0 0;
  max-height: 50vh; overflow: auto;
}
/* Внутри листа письма рамка и фон уже есть у самого листа —
   второй такой же квадрат в квадрате выглядит ошибкой вёрстки. */
.letter-sheet .letter-preview {
  border: 0; background: none; padding: 0; margin: 0; max-height: 62vh;
}

/* Поле, которое можно поменять прямо из строки списка */
.row-inline-act {
  border-bottom: 1px dashed var(--line); cursor: pointer;
}
.row-inline-act:hover { border-bottom-color: var(--metal-mid); color: var(--metal-mid); }

/* ============================================================
   ДОКУМЕНТ: ДОГОВОР, ПРИЛОЖЕНИЕ, СОГЛАСИЕ

   Одни и те же правила и для образца в базе знаний, и для того,
   что подпишет турист: собираются они одной функцией, значит и
   выглядеть должны одинаково.
   ============================================================ */
.print-doc .doc-section {
  margin: 20px 0 8px; font-size: var(--ш-12-5); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.print-doc .doc-item { margin: 5px 0; text-align: justify; }
.print-doc .doc-item.lvl-1 { padding-left: 0; }
.print-doc .doc-item.lvl-2 { padding-left: 16px; }
.print-doc .doc-item.lvl-3 { padding-left: 32px; }
.print-doc .doc-gap { margin: 0; height: 6px; }
.print-doc .doc-sign-line { margin: 14px 0 2px; letter-spacing: 0.08em; color: var(--muted); }
.print-doc p { text-align: justify; }
.print-doc .print-head h2 { text-transform: uppercase; }

/* Договор консультационного сопровождения Библио-Глобуса печатается
   тем же аккуратным документом, который менеджер показывает туристу. */
.bg-contract-band {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin: 0 0 22px; padding: 12px 16px; color: #fff; background: #0d6b68;
  font-size: var(--ш-11-5); line-height: 1.35;
}
.bg-contract-band strong { font-size: var(--ш-13); }
.bg-contract-band span { max-width: 52%; text-align: right; }
.bg-consult-contract .print-head { text-align: center; margin: 0 0 16px; }
.bg-consult-contract .print-head h2 { line-height: 1.35; }
.bg-consult-contract .doc-section { color: #0d6b68; }
.bg-consult-contract .bg-cost-clause {
  margin: 10px 0; padding: 8px 10px; border-left: 3px solid #0d6b68;
  background: #f2f8f7;
}
.bg-consult-contract .print-signs td { padding-right: 18px; }

.bg-notice-document { font-family: Arial, sans-serif; line-height: 1.45; }
.bg-notice-head { text-align: center; margin: 8px 0 18px; }
.bg-notice-head h1 { margin: 0 0 6px; font-size: 22px; }
.bg-notice-head p { margin: 0 auto; max-width: 760px; color: var(--muted); text-align: center; }
.bg-notice-meta { margin: 0 0 14px; }
.bg-notice-meta th { width: 22%; background: var(--surface-soft); text-align: left; }
.bg-notice-meta th, .bg-notice-meta td { padding: 7px 9px; border: 1px solid var(--line); }
.bg-notice-intro { padding: 10px 12px; background: #eaf3f7; border: 1px solid #c9dfe8; }
.bg-notice-section { margin: 18px 0 7px; color: #185679; font-size: 16px; }
.bg-notice-section.page-start { page-break-before: always; }
.bg-notice-meaning { margin: 9px 8px 14px; padding: 10px 12px; background: #fbefed; border: 1px solid #b65e52; }
.bg-notice-meaning ul { margin: 8px 0 0; padding-left: 18px; }
.bg-notice-meaning li { margin: 6px 0; }
.bg-notice-fees th { background: #185679; color: #fff; }
.bg-notice-fees td:last-child { text-align: center; color: #a63c31; }
.bg-notice-season { padding: 9px 11px; background: #fff6df; border: 1px solid #bc8a31; }
.bg-notice-critical { color: #a63c31; }
.bg-notice-bullet { padding-left: 14px; }
.bg-notice-confirm { margin-top: 20px; page-break-inside: avoid; }
.bg-notice-confirm h2 { color: #185679; font-size: 17px; }
.bg-notice-confirm table th, .bg-notice-confirm table td { border: 0; padding: 6px 8px 6px 0; }
.bg-notice-sign { text-align: right; }
.bg-notice-footer { color: var(--muted); font-size: 11px; margin-top: 24px; }

/* Место, которое заполнится из брони: в образце подсвечено,
   в подписанном документе его нет вовсе */
.tpl-slot {
  background: var(--sand-soft); border-radius: 4px; padding: 0 3px;
  font-style: normal; color: var(--ink);
}
@media print {
  .tpl-slot { background: none; padding: 0; }
}

/* Таблицы бланка: приложение к договору — это таблица, а не
   столбик строк. Пустые клетки оставляем видимыми: их заполняют
   руками, и рамка показывает, где именно писать. */
.print-doc .doc-table { margin: 10px 0 14px; }
.print-doc .doc-table td {
  border: 1px solid var(--line); padding: 6px 8px;
  font-size: var(--ш-12); vertical-align: top; text-align: left;
}
.print-doc .doc-table tr:first-child td { background: var(--surface-soft); font-weight: 600; }

/* ---------- Новое в заявке ----------
   Полоса в карточке брони или заявки: что пришло по почте и
   касается лично этого человека. Гаснет по кнопке «Ознакомлен»
   и только у того, кто нажал. */
.новое-в-заявке {
  border: 1px solid var(--line); border-left: 4px solid var(--metal-mid);
  border-radius: 12px; background: var(--surface);
  padding: 12px 14px; margin-bottom: 14px;
}
.новое-в-заявке.срочно { border-left-color: var(--rose); }
.нвз-шапка {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.нвз-шапка strong { font-size: var(--ш-13); letter-spacing: 0.01em; }
.нвз-шапка span { font-size: var(--ш-11-5); color: var(--muted); }
.нвз-строки { display: grid; gap: 8px; }
.нвз-строка {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.нвз-строка.важно { background: rgba(184, 107, 88, 0.07); }
.нвз-текст { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.нвз-текст b { font-size: var(--ш-12-5); }
.нвз-строка.важно .нвз-текст b { color: var(--rose); }
.нвз-текст span { font-size: var(--ш-12-5); font-weight: 600; }
.нвз-текст small { font-size: var(--ш-11); color: var(--muted); }
.нвз-кнопки { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Момент внесения операции — рядом с её датой, мелким и тише */
.settle-time { color: var(--muted); font-size: var(--ш-10-5); white-space: nowrap; }

/* ---------- Вышла новая версия ----------
   Полоса снизу: заметная, но ничего не закрывает. Перезагружает
   только по кнопке — человек может сейчас заполнять договор. */
.полоса-обновления {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 900; display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: 12px;
  background: var(--ink); color: var(--paper, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  font-size: var(--ш-13); max-width: calc(100vw - 32px);
}
.полоса-обновления span { line-height: 1.4; }
.полоса-обновления .link-btn { color: inherit; opacity: 0.7; }

/* ---------- Касса в сети ----------
   Точка рядом с названием: зелёная — касса спрашивает чеки прямо
   сейчас, жёлтая — замолчала, серая — выключена или без интернета. */
.касса-состояние {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ш-11-5); font-weight: 600; margin: 3px 0 2px;
}
.касса-точка { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.касса-состояние.всети { color: var(--green); }
.касса-состояние.всети .касса-точка {
  background: var(--green); box-shadow: 0 0 0 3px rgba(15, 111, 115, 0.16);
}
.касса-состояние.молчит { color: var(--amber); }
.касса-состояние.молчит .касса-точка { background: var(--amber); }
.касса-состояние.офлайн { color: var(--muted); }
.term-row.офлайн { border-left: 3px solid var(--line); }
.term-row.всети { border-left: 3px solid var(--green); }
.term-row.молчит { border-left: 3px solid var(--amber); }

/* Предупреждение внутри окна: касса не заведена, отправлять некуда */
.warn-text { color: var(--rose); font-weight: 600; }

/* Текст вопроса в окне ответа */
.вопрос-текст {
  margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--metal-mid);
  background: var(--surface); border-radius: 0 8px 8px 0;
  font-size: var(--ш-13); line-height: 1.5;
}

/* ---------- Вопросы и ответы ----------
   Полоса слева говорит состояние: зелёная — ответили, жёлтая —
   ждём, красная — ждём больше суток. */
.вопрос-строка {
  border: 1px solid var(--line); border-left: 3px solid var(--metal-mid);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--surface);
}
.вопрос-строка.ждём { border-left-color: var(--amber); }
.вопрос-строка.горит { border-left-color: var(--rose); }
.вопрос-строка.отвечен { border-left-color: var(--green); }
.вопрос-шапка { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.вопрос-шапка strong { font-size: var(--ш-13); }
.вопрос-метка { margin-left: auto; font-size: var(--ш-11); font-weight: 600; }
.вопрос-метка.ждём { color: var(--amber); }
.вопрос-метка.горит { color: var(--rose); }
.вопрос-метка.отвечен { color: var(--green); }
.вопрос-повод { margin: 4px 0 0; font-size: var(--ш-11-5); color: var(--muted); }
.вопрос-строка small { display: block; margin-top: 6px; font-size: var(--ш-11); color: var(--muted); }
.вопрос-ответ {
  margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--green);
  background: rgba(15, 111, 115, 0.06); border-radius: 0 8px 8px 0;
  font-size: var(--ш-13); line-height: 1.5;
}

/* ВКонтакте: подключено или нет */
.вк-состояние {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0; font-size: var(--ш-12-5);
}
.вк-состояние strong { font-size: var(--ш-13); }
.вк-состояние span { color: var(--muted); font-size: var(--ш-11-5); }
.вк-состояние.всети strong { color: var(--green); }
.вк-состояние.всети .касса-точка {
  background: var(--green); box-shadow: 0 0 0 3px rgba(15, 111, 115, 0.16);
}
.вк-состояние.офлайн strong { color: var(--muted); }
.вк-адрес { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--ш-11-5); }

/* Журнал неудачных попыток кассы */
.касса-попытки { margin-top: 10px; font-size: var(--ш-12); }
.касса-попытки summary { cursor: pointer; color: var(--muted); }

/* Ответ туристу во ВКонтакте прямо из заявки */
.вк-ответ { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.вк-ответ textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: var(--ш-13); resize: vertical;
  background: var(--surface); color: var(--ink);
}
.вк-ответ textarea:focus { outline: 2px solid var(--metal-mid); outline-offset: 1px; }
.timeline-item.наш-ответ p { border-left: 3px solid var(--green); padding-left: 10px; }

/* ---------- Переписка в заявке ----------
   Своя высота и своя прокрутка: переписка за месяц не должна
   отодвигать подбор и задачи на три экрана вниз. */
.заявка-вкладки .card-tabs { margin: -4px 0 12px; }
.переписка { display: flex; flex-direction: column; gap: 12px; }
.переписка-лента {
  max-height: 46vh; min-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px 4px 0;
}
.переписка-лента.пусто { min-height: 0; overflow: visible; }
.реплика {
  max-width: 82%; align-self: flex-start;
  border: 1px solid var(--line); border-radius: 12px 12px 12px 4px;
  padding: 9px 13px; background: var(--surface);
}
.реплика.наша {
  align-self: flex-end; border-radius: 12px 12px 4px 12px;
  background: rgba(15, 111, 115, 0.07); border-color: rgba(15, 111, 115, 0.22);
}
.реплика-шапка {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
  font-size: var(--ш-11);
}
.реплика-шапка b { font-size: var(--ш-12); }
.реплика-шапка span { color: var(--muted); }
.реплика p { margin: 0; font-size: var(--ш-13-5); line-height: 1.5; }
/* Не слова туриста, а наше описание его действия — нажал кнопку,
   написал без текста. Курсив и приглушённый фон отличают это
   от настоящей реплики. */
.реплика.действие { background: var(--surface-soft); border-style: dashed; }
.реплика.действие p { color: var(--muted); }

/* Пояснение, что за переписка в этой вкладке */
.переписка-о-чём {
  margin: 0; font-size: var(--ш-11-5); line-height: 1.5; color: var(--muted);
  border-left: 2px solid var(--line); padding-left: 10px;
}

/* Разбор параметров тура со снимка экрана */
.скрин-разбор {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.скрин-разбор input[type="file"] { font-size: var(--ш-12-5); }

/* ---------- Разбор заявки со слов ----------
   Две колонки: что было и что услышали. Изменившееся подсвечено —
   человек смотрит только на него. */
.разбор-полей { display: grid; gap: 8px; margin: 12px 0; }
.разбор-строка {
  display: grid; grid-template-columns: minmax(120px, 1fr) 1fr 1fr;
  gap: 10px; align-items: baseline;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.разбор-строка > span { font-size: var(--ш-11-5); color: var(--muted); }
.разбор-было { font-size: var(--ш-13); color: var(--muted); text-decoration: line-through; }
.разбор-стало { font-size: var(--ш-13); font-weight: 600; }
.разбор-строка.совпало { opacity: 0.6; }
.разбор-строка.совпало .разбор-было { text-decoration: none; }
.разбор-строка.меняем { border-left: 3px solid var(--green); }
@media (max-width: 720px) {
  .разбор-строка { grid-template-columns: 1fr; gap: 4px; }
}

/* Правка распознанного: поля, а не надписи */
.parse-result .parse-row {
  display: grid; grid-template-columns: minmax(130px, 1fr) 2fr;
  gap: 10px; align-items: center; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px;
}
.parse-result .parse-row.ok { border-left: 3px solid var(--green); }
.parse-result .parse-row.пусто { border-left: 3px solid var(--line); }
.parse-result .parse-row > span { font-size: var(--ш-11-5); color: var(--muted); }
.parse-result .parse-row input,
.parse-result .parse-row textarea {
  width: 100%; border: 1px solid transparent; border-radius: 7px;
  padding: 5px 8px; font: inherit; font-size: var(--ш-13); background: var(--surface);
  color: var(--ink); resize: vertical;
}
.parse-result .parse-row input:focus,
.parse-result .parse-row textarea:focus {
  outline: none; border-color: var(--metal-mid); background: var(--paper, #fff);
}
.разбор-строка.пусто { opacity: 0.75; }
.разбор-строка input, .разбор-строка textarea {
  width: 100%; border: 1px solid transparent; border-radius: 7px;
  padding: 5px 8px; font: inherit; font-size: var(--ш-13); background: var(--surface);
  color: var(--ink); font-weight: 600; resize: vertical;
}
.разбор-строка input:focus, .разбор-строка textarea:focus {
  outline: none; border-color: var(--metal-mid); background: var(--paper, #fff);
}
@media (max-width: 720px) {
  .parse-result .parse-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Время поступления заявки — рядом с датой, спокойным цветом */
.время-заявки { font-style: normal; font-weight: 500; color: var(--muted); font-size: var(--ш-11-5); }

/* ---------- Разговор с координатором CRM ----------
   Переписка, а не окно «вопрос-ответ»: лента со своей прокруткой
   и поле ввода снизу. */
.координатор { display: flex; flex-direction: column; gap: 12px; }
.коорд-лента {
  max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; padding-right: 2px;
}
.коорд-лента .chat-bubble.думает { opacity: 0.6; font-style: italic; }
.коорд-ввод textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: var(--ш-13); resize: vertical;
  background: var(--surface); color: var(--ink);
}
.коорд-ввод textarea:focus { outline: 2px solid var(--metal-mid); outline-offset: 1px; }

/* Пояснение под полосой, когда плана нет */
.plan-strip-hint {
  margin: 6px 0 0; font-size: var(--ш-11-5); line-height: 1.45; color: var(--muted);
}

/* ---------- Разбор работы клиентского сервиса ----------
   Цифры плитками, выводы строками: что получилось — зелёным,
   что горит — красным. */
.серв-цифры {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-top: 12px;
}
.серв-цифры article {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  background: var(--surface); display: grid; gap: 2px;
}
.серв-цифры article.плохо { border-left: 3px solid var(--rose); }
.серв-цифры span { font-size: var(--ш-11); color: var(--muted); line-height: 1.3; }
.серв-цифры strong { font-size: var(--ш-22); line-height: 1.1; font-variant-numeric: tabular-nums; }
.серв-цифры small { font-size: var(--ш-10-5); color: var(--muted); line-height: 1.3; }
.серв-строка {
  border-left: 3px solid var(--line); padding: 8px 0 8px 12px; margin-bottom: 8px;
}
.серв-строка p { margin: 0; font-size: var(--ш-13-5); line-height: 1.55; }
.серв-строка.хорошо { border-left-color: var(--green); }
.серв-строка.внимание { border-left-color: var(--amber); }
.серв-строка.плохо { border-left-color: var(--rose); }

/* Уведомления старой системы в разборе завала: рядом сказано, чем заменено */
.завал-кучка.служебные { border-left: 3px solid var(--metal-mid); }
.завал-список i { color: var(--muted); font-style: normal; font-size: var(--ш-11-5); }
.завал-список li { margin-bottom: 5px; line-height: 1.4; }

/* Откуда взялась справочная цель по обороту */
.turnover-hint { display: block; font-style: normal; font-size: var(--ш-11); color: var(--muted); margin-top: 2px; }

/* Заголовок столбца, по которому можно сортировать */
.booking-head .сорт {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.booking-head .сорт:hover { text-decoration: underline; }
.сорт-знак { font-style: normal; color: var(--teal); }

/* Договор застрял на доработке — видно в списке, не открывая */
.статус-договора.застрял .pill { font-weight: 600; }
.статус-договора.застрял::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  border-radius: 2px; background: var(--rose);
}

/* ---------- Расширенный отбор по базе туристов ---------- */
.tourist-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 12px 0; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.tourist-filters label { display: grid; gap: 4px; min-width: 0; }
.tourist-filters label > span { font-size: var(--ш-11); color: var(--muted); }
.tourist-filters input, .tourist-filters select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: var(--ш-13); background: var(--paper, #fff);
}
.tourist-filters-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.tourist-filters-foot .hint-line { margin-left: auto; }

/* ---------- Задачи сотрудников в «Моём дне» ----------
   Не список из четырёхсот строк, а кто как идёт. */
.чужие-задачи { display: grid; gap: 8px; margin-top: 12px; }
.чужая-строка {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  background: var(--surface); cursor: pointer; text-align: left; font: inherit;
}
.чужая-строка:hover { border-color: var(--metal-mid); }
.чужая-строка.горит { border-left: 3px solid var(--rose); }
.чужая-строка > span:nth-child(2) { flex: 1; display: grid; gap: 1px; min-width: 0; }
.чужая-строка strong { font-size: var(--ш-13); }
.чужая-строка small { font-size: var(--ш-11); color: var(--muted); }
.чужая-цифры { display: grid; gap: 1px; text-align: right; min-width: 74px; }
.чужая-цифры b { font-size: var(--ш-17); font-variant-numeric: tabular-nums; }
.чужая-цифры.горит b { color: var(--rose); }

/* ---------- Поле выбора туриста ---------- */
.турист-поле { display: grid; gap: 4px; position: relative; }
.турист-поле input[type="text"] { width: 100%; }
.турист-поле .link-btn { justify-self: start; padding: 0; font-size: var(--ш-12); }
.турист-найден { font-size: var(--ш-11-5); color: var(--muted); }
.турист-найден.нет { color: var(--rose); }

/* «+1» у времени прилёта: рейс садится назавтра */
.pf-plus {
  font-style: normal; font-size: var(--ш-11); font-weight: 600; color: var(--rose);
  vertical-align: super; margin-left: 2px;
}

/* ---------- Что с подписью ---------- */
.sign-track { display: grid; gap: 8px; margin: 10px 0 4px; }
.sign-track-row { display: flex; gap: 10px; align-items: flex-start; font-size: var(--ш-12-5); }
.sign-track-row > span { width: 18px; text-align: center; color: var(--muted); }
.sign-track-row.done > span { color: var(--green, #2e8b57); font-weight: 600; }
.sign-track-row small { display: block; color: var(--muted); font-size: var(--ш-11-5); }
.sign-log-details summary { cursor: pointer; font-size: var(--ш-12); color: var(--muted); margin: 6px 0; }

/* Галочка «приложить снимок» в окне разбора */
.скрин-в-файлы { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Приложение № 1 печатается на своей странице: это отдельный
   документ, и подшивают его отдельно. */
.print-annex { page-break-before: always; margin-top: 24px; }

/* Общая таблица правил: переключатель, что делает, кому */
.rules-table td { vertical-align: top; }
.rules-table small { display: block; color: var(--muted); font-size: var(--ш-11); }
.rule-row.off { opacity: 0.55; }
.rule-switch {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--metal-dark);
  font-weight: 700; line-height: 1;
}
.rule-row.off .rule-switch { background: var(--surface-soft); }
.rule-go { white-space: nowrap; }

/* ---------- Разбор базы ---------- */
.base-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.base-card {
  display: grid; gap: 8px; align-content: start;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--surface-soft);
}
.base-card.empty { opacity: 0.7; }
.base-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.base-head strong { font-size: var(--ш-13-5); }
.base-count { font-size: var(--ш-20); font-weight: 800; font-variant-numeric: tabular-nums; }
.base-card p { font-size: var(--ш-11-5); color: var(--muted); margin: 0; }
.base-facts { display: flex; gap: 14px; flex-wrap: wrap; }
.base-facts span { font-size: var(--ш-11); color: var(--muted); display: grid; }
.base-facts b { font-size: var(--ш-13); color: var(--ink); font-variant-numeric: tabular-nums; }
.base-names { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Договор PDF-ом ---------- */
.contract-pdf {
  width: 100%; height: min(70vh, 720px);
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin: 12px 0;
}

/* Чего не хватает и где это завести */
.дозаполнить { display: grid; gap: 8px; margin: 8px 0 6px; }
.дозаполнить-строка {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; background: #fff;
}
.дозаполнить-строка b { display: block; font-size: var(--ш-12-5); }
.дозаполнить-строка span { display: block; font-size: var(--ш-11-5); color: var(--muted); }

/* ---------- Заявка на бронирование ----------
   Приложение к договору: таблицы бланка агентства. Обводка тонкая —
   на бумаге толстая рамка съедает место и выглядит грубо. */
.заявка { margin-top: 10px; }
.заявка-таблица {
  width: 100%; border-collapse: collapse; margin: 0 0 10px;
  font-size: var(--ш-11); line-height: 1.35;
}
.заявка-таблица th,
.заявка-таблица td {
  border: 0.6px solid #2b2b2b;
  padding: 4px 6px; vertical-align: top; text-align: left;
}
.заявка-таблица th { font-weight: 600; text-align: center; }
.заявка-таблица td { min-height: 16px; }
.заявка-раздел {
  font-weight: 700; font-size: var(--ш-11-5); margin: 10px 0 4px;
  text-transform: uppercase;
}
.заявка-строка { font-size: var(--ш-11); margin: 6px 0; }

@media print {
  .заявка-таблица { page-break-inside: auto; }
  .заявка-таблица tr { page-break-inside: avoid; }
  .заявка-таблица th, .заявка-таблица td { border: 0.5pt solid #000; }
}

/* Цена договора: две одинаковые строки — туристу и туроператору */
.цена-строка {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: #fff;
}
.цена-подпись {
  font-size: var(--ш-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 8px;
}
.цена-итог { font-size: var(--ш-12-5); margin: 6px 0 0; color: var(--muted); }
.цена-итог b { color: var(--ink); font-variant-numeric: tabular-nums; }
.цена-итог.need { color: var(--rose, #b23b4b); }
.contract-words em { display: block; font-size: var(--ш-11); color: var(--muted); font-style: normal; }

/* В «Информации о заказе» встречаются широкие поля — выпадающий
   список юрлица, поле номера. Раньше они распирали свою колонку и
   налезали на соседнюю: строка разъезжалась, а разделитель шёл
   поверх текста. Держим их в своей ячейке. */
.booking-info-list div > strong { min-width: 0; }
.booking-info-list select,
.booking-info-list input {
  max-width: 100%;
  box-sizing: border-box;
}
.booking-info-list small.field-hint { display: block; margin-top: 2px; }

/* ---------- Вёрстка договора на экране ---------- */
.doc-place {
  display: flex; justify-content: space-between;
  margin: 0 0 12px; font-size: var(--ш-12-5);
}
.doc-page-break { height: 0; border-top: 1px dashed var(--line); margin: 18px 0; }
.doc-annex-line { font-size: var(--ш-11-5); color: var(--muted); text-align: right; margin: 0 0 8px; }
.doc-annex-title { text-align: center; font-size: var(--ш-15); font-weight: 700; margin: 0 0 12px; }
table.print-signs { width: 100%; border-collapse: collapse; }
table.print-signs td {
  border: 0; vertical-align: top; width: 50%;
  padding: 0 12px 0 0; font-size: var(--ш-12);
}
table.print-signs p { margin: 0 0 4px; }
@media print {
  .doc-page-break { page-break-before: always; border: 0; margin: 0; }
}

/* Сведения о туроператоре в договоре: вопрос бланка слева, ответ справа */
.сведения-то { width: 100%; border-collapse: collapse; font-size: var(--ш-11); margin: 0 0 10px; }
.сведения-то th, .сведения-то td {
  border: 0.6px solid #2b2b2b; padding: 4px 6px;
  vertical-align: top; text-align: left;
}
.сведения-то th { width: 45%; font-weight: 400; color: var(--muted); }
.сведения-то td { font-weight: 600; }
.заявка-таблица em.прописью {
  display: block; font-style: italic; font-size: var(--ш-10); color: var(--muted);
}

/* Темы, которые стоит раскрыть в комментарии к договору */
.темы-комментария { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.темы-комментария .тема {
  font-size: var(--ш-11); padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-soft);
}
.темы-комментария .тема.ok {
  border-color: rgba(46, 139, 87, 0.45); color: #2e8b57; background: rgba(46, 139, 87, 0.08);
}
.hand-field.wide { display: block; }
.hand-field.wide textarea { width: 100%; box-sizing: border-box; }

/* Поводы, собранные по отделам: сначала отдел с числом, потом записи */
.note-groups { display: grid; gap: 10px; margin-top: 6px; }
.note-group { border-left: 2px solid var(--line); padding-left: 10px; }
.note-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.note-group-head b { font-size: var(--ш-12); }
.note-group-head i {
  font-style: normal; font-size: var(--ш-11); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Состояние счёта в расчётах с клиентом */
.invoice-state {
  display: grid; gap: 4px; margin: 8px 0 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
}
.invoice-state.empty { background: var(--surface-soft); }
.invoice-state span { font-size: var(--ш-12-5); }
.invoice-state em { font-size: var(--ш-11-5); color: var(--muted); font-style: normal; }
.invoice-state .row-actions { margin-top: 4px; }

/* ---------- История писем по брони ---------- */
.mail-history { display: grid; gap: 10px; }
.mail-item {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; padding: 10px 12px; background: #fff;
}
.mail-item.out { border-left-color: var(--metal-mid); background: var(--surface-soft); }
.mail-item.fresh { border-left-color: var(--amber); }
.mail-item-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mail-item-head b { font-size: var(--ш-12-5); }
.mail-item-head i { font-style: normal; font-size: var(--ш-11-5); color: var(--muted); }
.mail-item-subject {
  display: block; text-align: left; width: 100%; margin: 4px 0 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--ш-13); font-weight: 600; color: var(--ink);
}
.mail-item-subject:hover { text-decoration: underline; }
.mail-item-text { margin: 2px 0 4px; font-size: var(--ш-12); color: var(--muted); line-height: 1.45; }
.mail-item-foot { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--ш-11); color: var(--muted); }

/* Участники поездки: имя по-русски и латиницей, обе строки по центру */
.заявка-таблица.участники td { text-align: center; vertical-align: middle; }
.заявка-таблица .имя-рус { display: block; font-weight: 400; }
.заявка-таблица .имя-лат { display: block; font-style: normal; letter-spacing: .3px; }

/* ---------- Окна с письмами ----------
   Письмо в двух строках не прочитать: человек его перед отправкой
   читает целиком и правит. Даём тексту место. */
.modal { max-height: calc(100vh - 24px); }
.modal-body { max-height: calc(100vh - 190px); }
/* Обычному полю хватает нескольких строк. Высокое — только там,
   где лежит письмо: его читают целиком перед отправкой. */
.modal-body textarea { min-height: 84px; line-height: 1.5; }
.modal-body .form-field.full textarea { min-height: 120px; }
.modal-body .mic-field textarea { min-height: 120px; }
.modal-body .письмо textarea,
.modal-body textarea[name="текст"],
.modal-body textarea[name="body"] { min-height: 260px; }

/* Посчитанный эквивалент в валюте рядом с суммой */
.static-value {
  padding: 9px 10px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--surface-soft); color: var(--muted);
  font-size: var(--ш-13); font-variant-numeric: tabular-nums; min-height: 38px;
  display: flex; align-items: center;
}

/* Отель в форме брони: длинное название переносится, а не прячется */
.form-field textarea[name="hotel"] { min-height: 58px; resize: vertical; }
/* Пустая ячейка-заполнитель: держит сетку, но ничего не рисует */
.form-field .static-value:empty,
.form-field:has(> .static-value:empty) { border: 0; background: none; min-height: 0; }

/* ---------- Эффективность действий ---------- */
.эфф-цифры { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.эфф-цифры article { background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.эфф-цифры strong { font-size: var(--ш-18); line-height: 1.1; }
.эфф-цифры span { font-size: var(--ш-11-5); color: var(--muted, #6b7280); }
.эфф-цифры small { font-size: var(--ш-11); color: var(--muted, #6b7280); }
.эфф-почему { margin: 0 0 8px; font-size: var(--ш-13); }

/* ---------- Умный отбор ---------- */
.smart-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px;
  padding: 8px 12px; border-radius: 10px; background: rgba(15,143,133,0.10); border: 1px solid rgba(15,143,133,0.25); font-size: var(--ш-13); }
.smart-chip .smart-q { font-style: italic; color: var(--muted, #6b7280); }
.smart-chip .link-btn { margin-left: auto; }

.smart-hint { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; padding: 7px 12px;
  background: #fff; border: 1px solid rgba(15,143,133,0.35); border-radius: 10px; font-size: var(--ш-12-5); color: #0f5f5a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.smart-examples { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.smart-example { border: 1px solid rgba(15,143,133,0.35); background: rgba(15,143,133,0.07); color: #0f5f5a;
  border-radius: 14px; padding: 5px 11px; font-size: var(--ш-12-5); cursor: pointer; text-align: left; }
.smart-example:hover { background: rgba(15,143,133,0.16); }
.search { position: relative; }

/* ---------- Быстрый поиск: что нашлось, сразу под строкой ----------
   Три группы — брони, заявки, туристы. Высоту ограничиваем: список
   прокручивается внутри себя, а не растягивает шапку. */
#выпадашкаПоиска { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 6px; }
.поиск-выпадашка {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(8, 63, 70, 0.16);
  max-height: 60vh; overflow: auto; padding: 4px;
}
.поиск-группа + .поиск-группа { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.поиск-шапка {
  font-size: var(--ш-11); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: 7px 10px 4px;
}
.поиск-строка {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 9px; font-family: inherit;
}
.поиск-строка:hover { background: var(--surface-soft); }
.поиск-главное { grid-column: 1; grid-row: 1; font-size: var(--ш-13); color: var(--ink); }
.поиск-снизу { grid-column: 1; grid-row: 2; font-size: var(--ш-11-5); color: var(--muted); }
.поиск-справа {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
  font-size: var(--ш-11-5); color: var(--muted); white-space: nowrap;
}
.поиск-пусто { padding: 14px 12px; font-size: var(--ш-12-5); color: var(--muted); }

/* ---------- Золотая кнопка: умный отбор ----------
   Тем же золотом, что и логотип: градиент с бликом, тёмная надпись. */
.gold-btn {
  border: 1px solid var(--gold-dark); border-radius: 10px; padding: 7px 14px; cursor: pointer;
  color: #3d2f0a; font-weight: 600; font-size: var(--ш-13); white-space: nowrap;
  background: linear-gradient(108deg, var(--gold-dark) 0%, var(--gold-mid) 42%, var(--gold-glow) 50%, var(--gold-mid) 58%, var(--gold-dark) 100%);
  background-size: 200% 100%; background-position: 0% 0;
  box-shadow: 0 2px 8px rgba(159,122,43,0.28);
  transition: background-position 0.5s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.gold-btn:hover { background-position: 100% 0; box-shadow: 0 4px 14px rgba(159,122,43,0.38); }
.gold-btn:active { transform: translateY(1px); }

.profile-palette { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); }
.profile-palette p { margin: 2px 0 8px; font-size: var(--ш-12-5); color: var(--muted, #6b7280); }

.audit-tabs { margin: 6px 0 12px; }

/* Полоса «кто сейчас в системе» на вкладке журнала */
.online-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.online-title { font-weight: 600; font-size: var(--ш-13); margin-right: 4px; }
.online-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: var(--ш-13); }
.online-chip small { color: var(--muted); font-size: var(--ш-11); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 0 3px rgba(35,165,90,.18); }

/* Этапы заявки с пояснением под названием */
.filter-choices.этапы .filter-choice { display: grid; gap: 2px; padding: 10px 12px; }
.filter-choices.этапы .filter-choice strong { font-size: var(--ш-13-5); font-weight: 600; }
.filter-choices.этапы .filter-choice small { color: var(--muted); font-size: var(--ш-11-5); line-height: 1.35; }
.filter-choices.этапы .filter-choice.on strong { color: var(--sea-deep); }
.lane-hint { color: var(--muted); font-size: var(--ш-11); line-height: 1.3; padding: 0 2px 6px; }
.op-quick { display: flex; align-items: center; gap: 8px; align-self: end; }

/* Кнопки операции держим у правого края: таблица шире экрана,
   и «подтвердить» уезжало вбок вместе с последним столбцом. */
.table-wrap .operations-table td.settle-actions,
.table-wrap .operations-table th:last-child {
  position: sticky; right: 0; z-index: 2;
  background: var(--surface);
  box-shadow: -8px 0 12px -10px rgba(8, 63, 70, 0.35);
}
.table-wrap .operations-table tr:hover td.settle-actions { background: var(--surface-soft); }


/* ---------- Полоса «нет связи, правки ждут» ----------
   Значок в углу человек не замечает: он смотрит в карточку. Эта
   полоса перекрывает низ экрана и не закрывается — уходит сама,
   когда правки уедут на сервер. */
.полоса-связи {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  padding: 12px 20px;
  background: #a83045;
  color: #fff;
  font-size: var(--ш-14);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}


/* Обсуждение вкладкой внутри карточки заявки: без своей рамки и
   заголовка — иначе панель внутри панели. */
.discussion.вложенное {
  display: block;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.discussion.вложенное .messages { margin-top: 8px; }

/* Кнопки «изменить» и «удалить» под своим сообщением: мелко и
   тускло, пока на сообщение не навели. */
.message-acts {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}
.message:hover .message-acts,
.comm-item:hover .message-acts,
.comment-note:hover .message-acts { opacity: 1; }
.message-acts .hint-line { font-size: var(--ш-12); }

/* Пометка о правке — рядом со временем, тем же тусклым цветом */
.правлено {
  font-style: normal;
  color: var(--muted);
  font-size: var(--ш-12);
}


/* ---------- Чек-лист касаний с туристом ----------
   Шесть отметок по ходу поездки. Что ещё рано делать — бледнее,
   но видно: дорога должна читаться целиком. */
.касания-лист {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 16px;
}
.касание {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.касание.есть { border-color: #bfe3d6; background: #f4fbf8; }
.касание.рано { opacity: 0.55; }
.касание strong { display: block; font-size: var(--ш-14); }
.касание small { display: block; color: var(--muted); font-size: var(--ш-12); margin-top: 2px; }
.касание-кто {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: var(--ш-12);
  color: #136b56;
}
.касание-кто.ждёт { color: #8d5c08; }
.касание-галка {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: var(--ш-14);
  color: #136b56;
  line-height: 1;
}
.касание.есть .касание-галка { background: #d8efe6; border-color: #9fd6c2; }
.касание-галка:hover { border-color: var(--metal-mid); }
.касание-заметка {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--ш-13);
}


/* ---------- Свёрнутое поле ----------
   Поля, которые заполняют раз за поездку, не должны занимать
   пол-экрана. Заголовок видно всегда, поле открывается нажатием;
   непустое открыто сразу — прятать написанное людьми нельзя. */
.складка { margin-top: 10px; }
.складка > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--ш-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.складка > summary::-webkit-details-marker { display: none; }
.складка > summary::before {
  content: "▸";
  font-size: var(--ш-12);
  transition: transform 0.12s ease;
}
.складка[open] > summary::before { transform: rotate(90deg); }
.складка > summary i {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.складка > summary i.есть { color: #136b56; }
.складка > summary:hover { color: var(--metal-mid); }


/* Письмо по теме, с которой уже знакомились: переписка пошла
   дальше, и это важнее первого письма. Отмечаем полосой сбоку и
   словами — цветом одним такое не скажешь. */
.нвз-строка.повтор { border-left: 3px solid var(--amber); padding-left: 9px; }
.нвз-строка .снова {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; background: var(--amber); color: #3a2a00;
  font-style: normal; font-size: var(--ш-11); font-weight: 600;
  letter-spacing: .01em; vertical-align: 1px;
}


/* ---------- Копирование значений ----------

   Данные из карточки переписывают в кабинет туроператора руками.
   Чтобы не переписывали, значение под полем лежит кнопкой: нажал
   и скопировал. У дат рядом её части — день, месяц, год: в
   кабинетах их набирают тремя клетками. */
.копии-даты {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.копия {
  font: inherit; font-size: var(--ш-11); line-height: 1.2;
  padding: 2px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface, #fff);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.копия:hover { border-color: var(--accent, #0a7c73); color: var(--ink); }
.копия:active { transform: translateY(1px); }
.копия:focus-visible { outline: 2px solid var(--accent, #0a7c73); outline-offset: 1px; }

/* Латиница под именем туриста: как в загранпаспорте */
.tourist-lat { margin: 2px 0 0; }
.tourist-lat .копия {
  font-size: var(--ш-12); letter-spacing: .04em; font-weight: 600; color: var(--ink);
}

/* Сводная таблица планов: десять колонок должны занимать ровно всю ширину. */
@media (min-width: 701px) {
  .norm-table { table-layout: fixed; width: 100%; }
  .norm-table th {
    padding: 7px 6px;
    font-size: var(--ш-12);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .norm-table td { padding: 7px 6px; overflow-wrap: anywhere; }
  .norm-table th:nth-child(1), .norm-table td:nth-child(1) { width: 21%; text-align: left; }
  .norm-table th:nth-child(2), .norm-table td:nth-child(2),
  .norm-table th:nth-child(3), .norm-table td:nth-child(3),
  .norm-table th:nth-child(4), .norm-table td:nth-child(4) { width: 7%; text-align: center; }
  .norm-table th:nth-child(5), .norm-table td:nth-child(5) { width: 13%; text-align: center; }
  .norm-table th:nth-child(6), .norm-table td:nth-child(6),
  .norm-table th:nth-child(7), .norm-table td:nth-child(7) { width: 10%; text-align: center; }
  .norm-table th:nth-child(8), .norm-table td:nth-child(8) { width: 12%; text-align: center; }
  .norm-table th:nth-child(9), .norm-table td:nth-child(9) { width: 7%; text-align: center; }
  .norm-table th:nth-child(10), .norm-table td:nth-child(10) { width: 6%; text-align: center; }
}

/* Нематериальная мотивация: план закрыт, но месяц ещё продолжается. */
.plan-motivation {
  display: block;
  margin-top: 3px;
  color: #1f7245;
  font-weight: 600;
}

/* Разбор отказа должен быть виден прямо в карточке заявки. */
.reject-analysis {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--metal-mid, #2f6fb5);
  background: rgba(47,111,181,0.06);
}
.reject-analysis div { display: grid; gap: 3px; }
.reject-analysis span { color: var(--muted, #6b7280); font-size: var(--ш-12); }
.reject-analysis strong { font-weight: 500; line-height: 1.4; white-space: pre-wrap; }
.bg-flow {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.bg-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5dfd2);
  border-radius: 8px;
  background: #fff;
}
.bg-step-no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f2eee4;
  font-weight: 700;
}
.bg-step div { min-width: 0; }
.bg-step strong, .bg-step small { display: block; }
.bg-step small { margin-top: 2px; color: var(--muted, #736d65); }
.bg-step.done { border-color: #a8d6c9; background: #f4fbf8; }
.bg-step.done .bg-step-no { background: #d9f1e9; color: #176653; }
.bg-rub-only { align-self: end; }
.bg-rub-only strong { display: block; padding: 10px 12px; }
.bg-actions button[disabled] { opacity: .5; cursor: not-allowed; }
.date-filter-input {
  min-width: 132px;
  font-variant-numeric: tabular-nums;
}

.bg-workflow-top { order: -1; }
.bg-workflow-top .param-block {
  border: 2px solid #b98a24;
  background: #fffdf7;
}
.bg-workflow-top .param-head h4 { font-size: var(--ш-18); }
.kb-source-pdf { margin: 0 0 18px; }
.knowledge-head[href] { display: block; text-decoration: none; color: inherit; }

/* ---------- Отчёты на телефоне ----------
   Таблицы отчёта превращаются в карточки общим мобильным правилом.
   У norm-table при этом оставались десктопные ширины колонок (5.5–21%),
   из-за чего текст помещался буквально по одной букве. */
@media (max-width: 700px) {
  #reports,
  #reports .reports-layout,
  #reports .panel,
  #reports .table-wrap,
  #reports table,
  #reports tbody,
  #reports tr,
  #reports td {
    min-width: 0;
    max-width: 100%;
  }

  #reports .reports-layout { gap: 10px; }
  #reports .panel { padding: 12px; }
  #reports .panel-head { margin-bottom: 12px; }

  #reports .report-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #reports .mini-field,
  #reports .mini-field select,
  #reports .mini-field input,
  #reports .date-filter-input,
  #reports .staff-pick {
    width: 100%;
    min-width: 0;
  }
  #reports .staff-chosen { max-width: 100%; }
  #reports .staff-chosen .chip {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  #reports .report-grid,
  #reports .profit-metrics,
  #reports .conversion-break,
  #reports .decomp-line,
  #reports .ct-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #reports .sales-plan-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
  }
  #reports .plan-row-who strong,
  #reports .plan-row-fact small,
  #reports .report-card span,
  #reports .report-card small,
  #reports .decomp-note,
  #reports .conversion-note {
    overflow-wrap: break-word;
    word-break: normal;
  }
  #reports .plan-row-act { justify-content: flex-start; }

  #reports .funnel-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
  }
  #reports .funnel-num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }

  #reports .table-wrap { overflow-x: visible; }
  #reports .table-wrap table,
  #reports table.norm-table,
  #reports table.cal-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }
  #reports .table-wrap tbody tr,
  #reports .norm-table tbody tr,
  #reports .cal-table tbody tr {
    width: 100%;
  }
  #reports .table-wrap tbody td,
  #reports .norm-table tbody td,
  #reports .cal-table tbody td,
  #reports .norm-table th:nth-child(n),
  #reports .norm-table td:nth-child(n) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
  #reports .norm-table tr.norm-person td:first-child {
    padding-left: 0;
  }
  #reports .norm-table tr.norm-person td:first-child strong,
  #reports .norm-table tr.norm-dept td:first-child strong {
    max-width: none;
    overflow-wrap: break-word;
    word-break: normal;
  }

  #reports .reject-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  #reports .reject-row strong { text-align: left; }
}
.onboarding-intro {
  padding: 12px 14px;
  border-left: 3px solid var(--teal, #0f766e);
  background: #eef8f7;
  color: #30403e;
}

.onboarding-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid var(--line, #e5ded4);
}

.onboarding-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #e5ded4);
}

.onboarding-step > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #dff2ef;
  color: #0b625c;
  font-weight: 700;
}

.onboarding-step strong { display: block; color: #202826; }
.onboarding-step p { margin: 3px 0 7px; color: #6b716f; line-height: 1.4; }
.onboarding-foot { margin: 14px 0 0; color: #6b716f; }

@media (max-width: 640px) {
  .onboarding-step { grid-template-columns: 30px minmax(0, 1fr); }
  .onboarding-step .link-btn { justify-self: start; }
}