/* ============================================================
   Личный кабинет клиента — стили
   Дизайн-система: Atlas (Apple-style)
   Mobile-first, design tokens loaded from tokens.css
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--canvas-parchment);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overflow-x: hidden; /* страховка: ничто не растягивает страницу вбок */
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* === Loading bar поверх всего экрана === */
.loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.loading-bar.show { opacity: 1; }
.loading-bar::after {
  content: '';
  position: absolute;
  width: 30%; height: 100%;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  animation: loadingBarSlide 1.2s ease-in-out infinite;
}
@keyframes loadingBarSlide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* === Контейнер приложения (mobile-first) === */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--canvas-parchment);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Сайдбар по умолчанию (мобильный) — скрыт, появляется только на десктопе */
.sidebar { display: none; }
.main { display: contents; } /* на мобильном работаем как раньше — экраны напрямую в .app */

/* Анти-вспышка при перезагрузке: пока JS не определил роль и нужный экран
   (через /api/auth/me), активный screen скрыт. Пользователь видит просто фон
   .app — без миллисекундной вспышки экрана логина. Снимается через
   data-ready="1" в конце бутстрапа. */
.app:not([data-ready="1"]) .screen.active { visibility: hidden; }

/* === Экраны === */
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

/* === Верхняя шапка (статус-бар + заголовок) === */
/* Шапка НЕ фиксируется — прокручивается вместе с контентом. Sticky только период-пикер. */
.topbar {
  position: static;
  background: var(--surface-frosted-light);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
  /* +safe-area сверху: в режиме PWA (standalone) контент рисуется под «челкой»/
     «островком» iPhone, иначе заголовок налезает на часы и иконки статус-бара.
     На устройствах без выреза env(...)=0 — отступ не меняется. */
  padding: calc(12px + env(safe-area-inset-top)) 20px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-l { display: flex; flex-direction: column; gap: 2px; }
.topbar-eyebrow { font: 600 11px var(--font-body); color: var(--ink-muted-48); letter-spacing: 0.5px; text-transform: uppercase; }
.topbar-title { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; color: var(--ink); }
.topbar-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink);
  transition: transform .12s, background .15s;
}
.topbar-back:active { transform: scale(0.92); background: rgba(0,0,0,.08); }
.topbar-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  transition: transform .12s;
  overflow: hidden;
  position: relative;
}
/* Расширяем хитбокс до 44×44 (Apple HIG минимум) через невидимый псевдо-элемент */
.topbar-av::after {
  content: '';
  position: absolute;
  inset: -2px;
}
.topbar-av:active { transform: scale(0.95); }
.topbar-av.has-logo { background: var(--canvas-parchment); }
/* Кнопка большого логотипа на странице профиля */
.client-logo-btn {
  cursor: pointer;
  border: 2px dashed transparent;
  transition: border-color .15s, transform .12s;
}
.client-logo-btn:hover { border-color: var(--primary); }
.client-logo-btn.has-logo { border-style: solid; border-color: var(--hairline); }

/* ============================================================
   Профиль клиента — карточка с логотипом, названием (редактируемым) и логином
============================================================ */
.profile-card {
  text-align: center;
  padding: 28px 20px 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
}
.profile-logo {
  width: 80px; height: 80px;
  font-size: 24px;
  margin: 0 0 14px 0;
}
/* Сетка "невидимый-спейсер | имя | карандашик" — имя по центру независимо
   от наличия карандаша (когда карандашик скрыт, его 28px колонка остается
   пустой, и левый спейсер ее компенсирует — все симметрично). */
.profile-name-wrap {
  display: inline-grid;
  grid-template-columns: 28px auto 28px;
  align-items: center;
  column-gap: 8px;
  padding: 0;
  justify-items: center;
}
.profile-name-wrap::before {
  content: ''; display: block; width: 28px; height: 1px;
  /* левый невидимый спейсер шириной как карандашик */
}
.profile-name {
  font: 600 21px var(--font-display); letter-spacing: 0.231px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 80vw;
}
.profile-edit-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 8px;
  color: var(--ink-muted-48);
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
  flex-shrink: 0;
}
.profile-edit-btn:hover { background: var(--canvas-parchment); color: var(--primary); }
.profile-edit-btn:active { transform: scale(0.92); }
.profile-login { margin-top: 4px; }
.profile-role { margin-top: 2px; font-size: 13px; }

/* ============================================================
   КОГОРТНЫЙ АНАЛИЗ
   - Ссылка-строка под списком менеджеров (открывает модалку)
   - Таблица-шахматка с heatmap-окраской
============================================================ */
.link-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .link-row:hover { border-color: var(--ink-muted-48); }
}
.link-row:active { transform: scale(0.995); }
.link-row-l {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.link-row-title {
  font: 600 15px var(--font-body); letter-spacing: -0.16px;
  color: var(--ink);
}
.link-row-sub {
  font: 400 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-48);
}
.link-row-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-muted-48);
  flex-shrink: 0;
  margin-left: 12px;
  line-height: 0;
  transition: transform .15s, color .15s;
}
.link-row:hover .link-row-arrow {
  color: var(--primary);
  transform: translateX(2px);
}

/* ===== Тулбар когортной модалки ===== */
/* Идея: каждая секция (Этап / Шаг / Старт / Когорт) — отдельная строка.
   Это дает четкий ритм и корректное поведение при любом размере экрана. */
.cohort-toolbar {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.cohort-toolbar-row {
  display: flex; align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cohort-toolbar-label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted-48);
  flex: 0 0 60px;       /* фиксированная ширина — все подписи выровнены слева */
  min-width: 60px;
}
.cohort-toolbar-label--right {
  flex: 0 0 auto;        /* без фиксированной ширины — для inline-подписей справа */
  min-width: 0;
  margin-right: 2px;
}
/* Раздвигает левую и правую группы во второй строке тулбара */
.cohort-toolbar-spacer { flex: 1 1 auto; }
.cohort-pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  font: 600 13px var(--font-body);
  letter-spacing: -0.12px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .cohort-pill-btn:hover { background: var(--hairline); }
}
.cohort-pill-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
@media (hover: hover) and (pointer: fine) {
  .cohort-pill-btn.active:hover { background: var(--primary-focus); }
}
/* Узкая модификация для нумерованных пилюль (3 / 6 / 12) */
.cohort-pill-btn--num {
  min-width: 40px;
  padding: 0 10px;
}
.cohort-select {
  flex: 1 1 200px;
  min-width: 160px;
  height: 32px;
  padding: 0 32px 0 12px;     /* +20px справа под кастомную стрелку */
  border-radius: var(--r-sm);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font: 400 13px var(--font-body);
  letter-spacing: -0.12px;
  cursor: pointer;
  /* Сбрасываем системный стиль селекта и рисуем СВОЙ chevron справа */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
.cohort-select:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary); }

/* SVG-стрелки в кнопках — всегда block для идеального центрирования через flex */
.cohort-nav-btn svg,
.cohort-picker-nav svg,
.cohort-start-chev svg,
.link-row-arrow svg {
  display: block;
}

/* Контейнер таблицы — горизонтальный скролл на узких экранах */
.cohort-result {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 4px;
}

.cohort-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 400 13px var(--font-body);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cohort-table th,
.cohort-table td {
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.cohort-table tr:last-child th,
.cohort-table tr:last-child td { border-bottom: none; }
.cohort-table th:last-child,
.cohort-table td:last-child { border-right: none; }

.cohort-table thead th {
  background: var(--canvas-parchment);
  font: 600 11px var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 12px;
}
.cohort-table .cohort-cohort-label {
  text-align: left;
  font: 600 13px var(--font-body);
  letter-spacing: -0.12px;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
  background: var(--canvas);
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--hairline);
}
.cohort-table thead .cohort-cohort-label {
  background: var(--canvas-parchment);
  font: 600 11px var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 3;
}
.cohort-table .cohort-total {
  font: 600 14px var(--font-display);
  color: var(--ink);
  letter-spacing: -0.2px;
  background: var(--canvas);
}
.cohort-cell-num {
  font: 600 14px var(--font-display);
  letter-spacing: -0.2px;
  color: var(--ink);
  line-height: 1.2;
}
.cohort-cell-pct {
  font: 400 11px var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: -0.1px;
  margin-top: 1px;
}
.cohort-cell-empty { color: var(--ink-muted-48); opacity: 0.5; }
/* В режиме выручки числа длиннее («1,5 М ₽») — уменьшаем шрифт чтобы вмещалось */
.cohort-table--revenue .cohort-cell-num { font-size: 12px; letter-spacing: -0.1px; }
.cohort-table--revenue .cohort-total    { font-size: 12px; }
.cohort-table--revenue th, .cohort-table--revenue td { padding: 8px 8px; }
@media (max-width: 700px) {
  .cohort-table--revenue .cohort-cell-num { font-size: 11px; }
  .cohort-table--revenue .cohort-total    { font-size: 11px; }
  .cohort-table--revenue th, .cohort-table--revenue td { padding: 6px 6px; }
}
.cohort-cell-future { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--canvas-parchment) 4px, var(--canvas-parchment) 8px); }
/* Невозможная ячейка — слева от диагонали (период раньше рождения когорты). */
.cohort-cell-impossible { background: var(--canvas-parchment); opacity: 0.5; }

/* Навигация стартового периода (стрелки + лейбл) */
.cohort-nav-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0; line-height: 0;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cohort-nav-btn:hover:not(:disabled) {
  background: var(--canvas);
  color: var(--primary);
  border-color: var(--primary);
}
.cohort-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cohort-start-label {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  min-width: 130px; padding: 4px 10px; height: 28px;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cohort-start-label:hover { border-color: var(--ink-muted-48); }
.cohort-start-chev {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-muted-48);
  line-height: 0;
  transition: transform .15s;
}
.cohort-start-wrap {
  position: relative;
  display: inline-flex;
}

/* Поповер пикера стартового периода */
.cohort-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  min-width: 240px;
}
.cohort-picker--week { min-width: 280px; max-height: 320px; overflow-y: auto; }
.cohort-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.cohort-picker-title {
  font: 600 14px var(--font-display); letter-spacing: -0.2px;
  color: var(--ink);
  flex: 1; text-align: center;
}
.cohort-picker-nav {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0; line-height: 0;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cohort-picker-nav:hover:not(:disabled) {
  background: var(--canvas);
  color: var(--primary);
  border-color: var(--primary);
}
.cohort-picker-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.cohort-picker-grid {
  display: grid;
  gap: 6px;
}
.cohort-picker-grid--months { grid-template-columns: repeat(3, 1fr); }
.cohort-picker-cell {
  padding: 8px 6px;
  background: var(--canvas-parchment);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  font: 500 13px var(--font-body); letter-spacing: -0.12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cohort-picker-cell:hover:not(.is-disabled) {
  background: var(--primary-tint);
  color: var(--primary);
}
.cohort-picker-cell.is-selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.cohort-picker-cell.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cohort-picker-weeks {
  display: flex; flex-direction: column;
  gap: 4px;
}
.cohort-picker-week {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--canvas-parchment);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  font: 500 13px var(--font-body);
  letter-spacing: -0.12px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, border-color .15s;
}
.cohort-picker-week:hover:not(.is-disabled) {
  background: var(--primary-tint);
  color: var(--primary);
}
.cohort-picker-week.is-selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.cohort-picker-week.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cohort-picker-week-num {
  font: 600 12px var(--font-mono);
  letter-spacing: -0.1px;
  color: var(--ink-muted-48);
  flex-shrink: 0;
  width: 36px;
}
.cohort-picker-week.is-selected .cohort-picker-week-num { color: rgba(255,255,255,0.8); }
.cohort-picker-week-range { flex: 1; }

/* ============================================================
   КОГОРТА — Mobile (≤700px)
   - Тулбар: подписи «Этап/Старт/Когорт» сужаются, элементы плотнее
   - Таблица: компактнее, sticky первая колонка с тенью для отделения
   - Пикер: ширина ограничена viewport-32px, чтобы не вылезал вправо
============================================================ */
@media (max-width: 700px) {
  /* На мобильном «Этап» убираем — пилюли сами говорят, что это про этап.
     «Когорт» оставляем (без нее ряд непонятный). */
  .cohort-toolbar-label:not(.cohort-toolbar-label--right) {
    display: none;
  }
  .cohort-toolbar-label--right {
    font-size: 10px;
    letter-spacing: 0.4px;
  }
  .cohort-pill-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }
  .cohort-pill-btn--num { min-width: 38px; padding: 0 8px; }
  .cohort-nav-btn { width: 30px; height: 30px; font-size: 15px; }
  .cohort-start-label {
    height: 30px;
    min-width: 110px;
    font-size: 12px;
    padding: 0 10px;
  }
  /* Dropdown остается в одной строке с pill-ами «Замер назначен» / «Продажа».
     Если суммарно не помещаются — flex-wrap сам перенесет. */
  .cohort-select {
    height: 30px;
    font-size: 12px;
    min-width: 110px;
    padding: 0 10px;
    flex: 1 1 110px;
  }

  .cohort-table th, .cohort-table td {
    padding: 8px 8px;
  }
  .cohort-cell-num { font-size: 13px; }
  .cohort-cell-pct { font-size: 10px; }
  .cohort-table .cohort-cohort-label { font-size: 12px; padding: 8px 10px; }
  .cohort-table .cohort-total { font-size: 13px; padding: 8px 6px; }

  /* Пикер на мобильном — не больше доступной ширины модалки */
  .cohort-picker {
    min-width: 220px;
    max-width: calc(100vw - 80px);
  }
  .cohort-picker--week { min-width: 240px; max-height: 60vh; }
}

/* Тень у sticky-колонки при горизонтальном скролле — отделяет ее от прокручиваемой части */
.cohort-table .cohort-cohort-label {
  box-shadow: 1px 0 0 var(--hairline);
}
/* На мобильном добавляем более явную тень */
@media (max-width: 700px) {
  .cohort-table .cohort-cohort-label {
    box-shadow: 2px 0 6px rgba(0,0,0,0.06);
  }
}

.cohort-legend-text {
  margin-top: 14px;
  font: 400 12px/1.5 var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: -0.1px;
}
.cohort-legend-text b { color: var(--ink-muted-80); font-weight: 600; }

/* Переключатель темы (Авто / Светлая / Темная) в строке настроек профиля. */
.theme-seg {
  display: inline-flex;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 0;
}
.theme-seg-btn {
  min-width: 32px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px var(--font-body);
  color: var(--ink-muted-80);
  background: transparent;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  padding: 0 10px;
  transition: background .15s, color .15s;
}
.theme-seg-btn.active {
  background: var(--canvas);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.theme-seg-btn:active { transform: scale(0.96); }

/* === Контент страницы === */
/* .content — обычный блок, БЕЗ собственного overflow-скролла.
   Скроллит body/html — это нужно чтобы position: sticky внутри (период-пикер)
   прилипал к виду экрана, а не к самому контейнеру. */
/* Нижний отступ учитывает фиксированное меню + safe-area iPhone (полоска снизу),
   иначе контент «слипается» с нижним меню на телефонах с home-indicator. */
.content { flex: 1; padding: 16px 20px calc(100px + env(safe-area-inset-bottom)); }
.content > * + * { margin-top: 24px; }

/* === Эйброу-секция === */
.section-eyebrow {
  font: 600 11px var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 4px;
}

/* === Карточка (форм-радиус 11px, без теней) === */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.card + .card { margin-top: 12px; }

/* === Большая метрика (бюджет) === */
.metric-hero {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
}
.metric-hero-label {
  font: 400 14px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.224px;
  display: flex; align-items: center; gap: 8px;
}
.metric-hero-value {
  font: 600 40px/1.10 var(--font-display);
  letter-spacing: -0.4px; color: var(--ink);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.metric-hero-value .unit { font-size: 24px; color: var(--ink-muted-48); font-weight: 400; }
.metric-hero-sub {
  font: 400 14px var(--font-body); color: var(--ink-muted-80);
  letter-spacing: -0.224px; margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
}
.metric-hero-bar {
  height: 6px; background: var(--canvas-parchment); border-radius: var(--r-pill);
  margin-top: 14px; overflow: hidden;
}
.metric-hero-bar-fill {
  height: 100%; background: var(--primary); border-radius: var(--r-pill);
  transition: width .4s var(--ease-system);
}
.metric-hero-bar-fill.warn { background: var(--status-orange); }
.metric-hero-bar-fill.danger { background: var(--status-red); }

/* === Сетка из двух метрик === */
.metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.metric-tile {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 16px;
}
.metric-tile-label {
  font: 400 13px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
}
.metric-tile-value {
  font: 600 28px/1.14 var(--font-display); letter-spacing: 0.196px;
  color: var(--ink); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.metric-tile-delta {
  font: 600 12px var(--font-body); letter-spacing: -0.12px; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 3px;
}
.delta-up   { color: var(--status-green-on-tint); }
.delta-down { color: var(--status-red-on-tint); }
.delta-flat { color: var(--ink-muted-48); }

/* === Бэйджи статуса === */
.badge {
  font: 600 11px var(--font-body); letter-spacing: -0.12px;
  padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-blue   { background: var(--status-blue-tint);   color: var(--status-blue-on-tint); }
.badge-green  { background: var(--status-green-tint);  color: var(--status-green-on-tint); }
.badge-orange { background: var(--status-orange-tint); color: var(--status-orange-on-tint); }
.badge-red    { background: var(--status-red-tint);    color: var(--status-red-on-tint); }
.badge-yellow { background: var(--status-yellow-tint); color: var(--status-yellow-on-tint); }

/* === Список (full-bleed cards, hairline-divided) === */
.list { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.list-row { padding: 14px 16px; border-bottom: 1px solid var(--divider-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background .15s; }
.list-row:last-child { border-bottom: none; }
.list-row:active { background: var(--canvas-parchment); }
.list-row.clickable { cursor: pointer; }
.list-row-l { flex: 1; min-width: 0; }
.list-row-title { font: 600 17px/1.24 var(--font-body); letter-spacing: -0.374px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-sub   { font: 400 14px/1.43 var(--font-body); letter-spacing: -0.224px; color: var(--ink-muted-80); margin-top: 2px; }
.list-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.list-row-value { font: 600 17px/1.24 var(--font-body); letter-spacing: -0.374px; color: var(--ink); font-variant-numeric: tabular-nums; }
.list-row-chevron { color: var(--ink-muted-48); font-size: 18px; }

/* === Кнопка primary (pill) === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: var(--r-pill);
  font: 600 17px/1 var(--font-body); letter-spacing: -0.374px;
  transition: transform .12s, background .15s, color .15s;
  width: 100%;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:active { background: var(--primary-focus); transform: scale(0.97); }
.btn-secondary { background: var(--canvas); color: var(--primary); border: 1px solid var(--hairline); }
.btn-secondary:active { background: var(--canvas-parchment); transform: scale(0.97); }

/* === Поле ввода === */
.input {
  width: 100%;
  padding: 14px 16px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font: 400 17px var(--font-body); letter-spacing: -0.374px;
  color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--primary-focus); box-shadow: var(--focus-ring); }
.input::placeholder { color: var(--ink-muted-48); }
.input-label {
  display: block;
  font: 600 11px var(--font-body); letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-muted-48);
  margin-bottom: 8px; padding: 0 4px;
}

/* === Нижняя навигация (frosted bottom-nav) === */
.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--surface-frosted-light);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--hairline);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-around;
  z-index: 60;
}
.bn-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: var(--r-md);
  color: var(--ink-muted-48);
  transition: color .15s, transform .12s;
  white-space: nowrap;
}
.bn-btn:active { transform: scale(0.94); }
.bn-btn.active { color: var(--primary); }
.bn-btn-ico { width: 22px; height: 22px; display: block; }
.bn-btn-lbl { font: 400 10px var(--font-body); letter-spacing: -0.1px; }

/* Когда показывается экран входа — скрыть боттом-нав */
.app[data-screen="login"] .bottomnav { display: none; }

/* ============================================================
   ЭКРАН ВХОДА — следует теме кабинета.
   Дизайн: спокойный, без множественных эффектов — в духе Linear/Vercel auth.
   Все цвета через токены, чтобы корректно работать в light/dark.
============================================================ */
.app[data-screen="login"] {
  background-color: var(--canvas-parchment);
  /* Один очень тонкий вертикальный градиент для легкой глубины.
     В светлой теме почти невидим, в темной — мягкое затемнение к низу. */
  background-image: linear-gradient(
    180deg,
    var(--canvas) 0%,
    var(--canvas-parchment) 100%
  );
}

.login-wrap {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 24px;
  position: relative;
  gap: 28px;
}

/* Hero — только логотип */
.login-hero {
  text-align: center;
  margin: 0;
}
.login-wordmark {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}
.login-logo {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 22px var(--font-display); letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.login-title {
  font: 600 22px/1.2 var(--font-display); letter-spacing: -0.2px;
  color: var(--ink);
  margin-top: 16px;
}
.login-sub {
  font: 400 14px/1.4 var(--font-body); letter-spacing: -0.16px;
  color: var(--ink-muted-48);
  margin-top: 6px;
}

/* Форма — прямо на фоне, без карточки */
.login-form {
  display: flex; flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.login-form .input-label {
  color: var(--ink-muted-80);
  font: 500 13px var(--font-body);
  letter-spacing: -0.1px;
  margin-bottom: 6px;
  display: block;
  text-transform: none;
}
.login-form .input {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--ink);
  height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 16px; /* 16px — иначе iOS Safari зумит поле логина при фокусе */
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.login-form .input::placeholder { color: var(--ink-muted-48); opacity: 0.7; }
.login-form .input:hover { border-color: var(--ink-muted-48); }
.login-form .input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
  outline: none;
}
.login-form .btn {
  margin-top: 6px;
  height: 48px;
  border-radius: 10px;
  font: 600 15px var(--font-body);
  letter-spacing: -0.16px;
}
.login-form .btn-primary {
  background: var(--primary);
  color: #fff;
  transition: background .15s;
  box-shadow: none;
}
.login-form .btn-primary:hover { background: var(--primary-focus); }

/* Ссылка «Отправить код снова» — нормальная гиперссылка */
.login-resend-wrap { margin-top: 14px; text-align: center; }
.login-link {
  display: inline-block;
  color: var(--primary);
  font: 500 13px var(--font-body); letter-spacing: -0.06px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.login-link:hover { color: var(--primary-focus); }
/* Во время отсчета повторной отправки — серая, некликабельная */
.login-link--disabled {
  color: var(--ink-muted-48);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

/* Подсказка под формой логина — мельче и спокойнее */
.login-status {
  font: 400 12px/1.4 var(--font-body); letter-spacing: -0.06px;
  margin-top: 4px;
  color: var(--ink-muted-48);
  text-align: center;
}

/* Строка получателя над OTP — маленькая стрелка «назад» + email */
.login-recipient {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 16px;
  color: var(--ink-muted-80);
  font: 400 13px var(--font-body); letter-spacing: -0.06px;
}
.login-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-muted-80); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
}
.login-back:hover { background: var(--canvas-parchment); color: var(--ink); border-color: var(--ink-muted-48); }
.login-back:active { transform: scale(0.92); }
.login-recipient-email { color: var(--ink); font-weight: 500; }

/* OTP — 6 ячеек */
.login-otp {
  display: flex; gap: 8px; justify-content: center;
  margin: 4px 0 0;
}
.login-otp-cell {
  width: 48px; height: 56px;
  text-align: center;
  font: 600 22px var(--font-body); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
  color: var(--ink);
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.login-otp-cell:hover { border-color: var(--ink-muted-48); }
.login-otp-cell:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.login-otp-cell.filled { border-color: var(--primary); }

@media (max-width: 380px) {
  .login-otp { gap: 6px; }
  .login-otp-cell { width: 42px; height: 52px; font-size: 20px; }
}

.login-hint {
  text-align: center;
  font: 400 12px var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: -0.1px;
  margin: 0;
}

/* === График-плейсхолдер === */
.spark {
  height: 80px;
  display: flex; align-items: flex-end; gap: 4px;
  margin-top: 14px;
}
.spark-bar {
  flex: 1;
  background: var(--primary-tint);
  border-radius: 3px;
  transition: background .15s;
}
.spark-bar.active { background: var(--primary); }

/* === Утилиты === */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--ink-muted-48); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.spacer-sm { height: 8px; }
.spacer-md { height: 16px; }

/* ============================================================
   ПЕРИОД-ПИКЕР (как в Я.Директе — dropdown + двухмесячный календарь)
============================================================ */
/* Период-пикер sticky на всех размерах экрана. Шапка теперь НЕ sticky,
   поэтому пикер прилипает к самому верху вьюпорта (top: 8px — небольшой воздух). */
.period-wrap {
  position: sticky;
  /* +safe-area: иначе при скролле пикер прилипает под «челку»/островок iPhone
     (PWA standalone). На устройствах без выреза env(...)=0 — остается 8px. */
  top: calc(8px + env(safe-area-inset-top));
  z-index: 30;
  display: inline-block;
  margin-bottom: 20px;
}

/* Индикатор загрузки — легкая пульсация в тексте кнопки.
   .loading — синхронная загрузка (нет кеша, ждем).
   .bg-refreshing — фоновое обновление (показан кеш, фетчим свежак). */
.period-trigger-text.loading,
#period-trigger-text.loading {
  animation: periodLoading 1.2s infinite;
}
.period-trigger-text.bg-refreshing,
#period-trigger-text.bg-refreshing {
  animation: periodLoading 1.6s infinite;
  opacity: 0.85;
}
@keyframes periodLoading {
  0%   { opacity: 1; }
  50%  { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Кнопка-триггер */
.period-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font: 600 15px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s;
  min-width: 240px;
  justify-content: space-between;
}
.period-trigger:hover { background: var(--canvas-parchment); }
.period-trigger:active { transform: scale(0.99); }
.period-trigger .chev {
  font-size: 12px; color: var(--ink-muted-48);
  transition: transform .15s;
  flex-shrink: 0;
}
.period-wrap.open .period-trigger .chev { transform: rotate(180deg); }
.period-wrap.open .period-trigger { background: var(--canvas-parchment); }

/* Выпадающее меню */
.period-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  min-width: 280px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 100;
  display: none;
}
.period-wrap.open .period-menu { display: block; }

.period-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font: 400 15px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background .12s;
  font-variant-numeric: tabular-nums;
}
.period-item:hover { background: var(--canvas-parchment); }
.period-item .check { color: var(--ink); font-size: 14px; opacity: 0; }
.period-item.active .check { opacity: 1; }
.period-item.active { font-weight: 600; }

.period-sep {
  height: 1px; background: var(--divider-soft); margin: 6px 8px;
}

/* Календарь (двухмесячный) — как модал поверх всего */
.cal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cal-overlay.open { display: flex; }
.cal-wrap {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.16);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.cal-body {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px 0 18px;
}
.cal-nav-side {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted-48);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s, color .15s, transform .12s;
  align-self: center;
}
/* SVG-иконки стрелок — идеально центрированы в кружке */
.cal-nav-side svg {
  width: 18px; height: 18px;
  display: block;
}
.cal-nav-side:hover { background: var(--canvas-parchment); color: var(--ink); }
.cal-nav-side:active { transform: scale(0.92); }

.cal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  flex: 1;
}
.cal-month {
  min-width: 220px;
}
.cal-title {
  font: 600 15px var(--font-body); color: var(--ink);
  letter-spacing: -0.224px;
  text-align: center;
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Блокируем системный zoom на double-tap (мобильный) */
  touch-action: manipulation;
  padding: 6px 0;
  border-radius: 8px;
  transition: background .15s;
}
@media (hover: hover) and (pointer: fine) {
  .cal-title:hover { background: var(--canvas-parchment); }
}
.cal-title:active { background: var(--canvas-parchment); }

.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-dow div {
  text-align: center;
  font: 600 11px var(--font-body); letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-muted-48);
  padding: 6px 0;
}

/* Сетка дней — без зазоров между ячейками для непрерывного фона диапазона */
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  position: relative;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  font: 400 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  background: transparent;
  user-select: none;
}
.cal-day-circle {
  position: relative; z-index: 1;
  /* Круг по высоте равен высоте ячейки — touching top+bottom.
     Это убирает зазоры между range-start/end и заливкой соседних рядов. */
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .12s, color .12s;
}
.cal-day:hover:not(.empty):not(.disabled):not(.range-start):not(.range-end) .cal-day-circle {
  background: var(--primary-tint);
  color: var(--primary);
}
.cal-day.empty { cursor: default; }
.cal-day.disabled { cursor: not-allowed; }
.cal-day.disabled .cal-day-circle { color: var(--ink-muted-48); opacity: 0.5; }
.cal-day.today:not(.range-start):not(.range-end) .cal-day-circle { color: var(--primary); font-weight: 700; }

/* Подсветка диапазона — стиль Я.Директа: единый непрерывный блок через все строки.
   Соседние недели касаются вертикально (нет zero-gap у grid). Концы — синие круги поверх. */
.cal-day.in-range { background: var(--primary-tint); }
.cal-day.range-start { background: linear-gradient(to right, transparent 50%, var(--primary-tint) 50%); }
.cal-day.range-end   { background: linear-gradient(to left,  transparent 50%, var(--primary-tint) 50%); }
.cal-day.range-start.range-end { background: transparent; } /* один день */

/* Когда range-start попадает на ПОСЛЕДНЮЮ колонку (ВС) — справа стена,
   рисовать половинную заливку некуда. Оставляем только синий кружок. */
.cal-day.range-start:nth-child(7n) { background: transparent; }

/* То же для range-end в ПЕРВОЙ колонке (ПН) — слева нет соседа. */
.cal-day.range-end:nth-child(7n+1) { background: transparent; }


/* Кружок выбранной даты — solid primary, белый текст.
   Размер наследуется от .cal-day-circle (36×36 desktop, 48×48 mobile —
   ровно высота ячейки, без зазоров сверху/снизу).
   box-shadow убрана — раньше создавала «крышку» над кругом. */
.cal-day.range-start .cal-day-circle,
.cal-day.range-end .cal-day-circle {
  background: var(--primary); color: #fff;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ФИКС «бага» при выборе ОДНОЙ даты: пока второй край диапазона не выбран,
   у range-start нет смысла рисовать половинный фон — он создает визуальный
   «обрыв». Через :has() убираем фон, оставляем только синий кружок. */
.cal-days:not(:has(.range-end)) .cal-day.range-start { background: transparent; }

.cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--divider-soft);
}
.cal-range-display {
  font: 600 14px var(--font-body); color: var(--ink);
  letter-spacing: -0.224px;
  font-variant-numeric: tabular-nums;
}
.cal-range-display .muted { color: var(--ink-muted-48); font-weight: 400; margin: 0 4px; }
.cal-actions { display: flex; gap: 8px; }
.cal-btn {
  padding: 8px 16px;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  border-radius: var(--r-pill);
  transition: background .15s, transform .12s;
}
.cal-btn:active { transform: scale(0.97); }
.cal-btn.secondary { background: var(--canvas-parchment); color: var(--ink-muted-80); }
.cal-btn.secondary:hover { color: var(--ink); }
.cal-btn.primary { background: var(--primary); color: #fff; }
.cal-btn.primary:hover { background: var(--primary-focus); }
.cal-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* На мобильном — один месяц видим, крупные ячейки для удобного тапа */
@media (max-width: 900px) {
  /* Шапка — обычная (прокручивается вместе с контентом) */
  .topbar { position: static; }
  /* Период-пикер закреплен, но БЕЗ белой полосы во всю ширину —
     остается компактной кнопкой слева, фон/blur только под самой кнопкой. */
  .period-wrap {
    position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 40;
    display: inline-block;       /* по содержимому, не на всю ширину */
    margin-bottom: 20px;
  }
  /* Меню выпадашки — на всю ширину контента (это удобно), а не привязано к узкой кнопке */
  .period-menu { left: 0; right: auto; width: calc(100vw - 40px); max-width: 320px; }

  /* Календарь: стрелки уходят в строку заголовка (как в iOS),
     сетка дней занимает всю ширину поп-апа */
  .cal-wrap { position: relative; padding: 16px 16px 18px; }
  .cal-body { position: relative; padding: 0; gap: 0; flex-direction: column; }
  .cal-grid { grid-template-columns: 1fr; gap: 0; }
  .cal-nav-side {
    position: absolute; top: 0; z-index: 2;
    width: 40px; height: 40px;
  }
  .cal-nav-side.cal-nav-left  { left: 0;  }
  .cal-nav-side.cal-nav-right { right: 0; }
  .cal-title {
    /* Центрируем заголовок «Май 2026» в строке между стрелками */
    padding: 0 48px;
    font-size: 18px;
    line-height: 40px;
    margin-bottom: 10px;
  }

  /* Крупнее все — есть пространство, его надо использовать.
     Круг = высоте ячейки (48×48), чтобы touching top+bottom — без зазоров. */
  .cal-dow div { font-size: 13px; padding: 8px 0; }
  .cal-day    { height: 48px; font-size: 17px; }
  .cal-day-circle { width: 48px; height: 48px; }
  .cal-range-display { font-size: 16px; }
  .cal-btn { font-size: 15px; padding: 10px 18px; }
  .cal-foot { margin-top: 16px; padding-top: 16px; }
}

/* ============================================================
   МОДАЛЬНОЕ ОКНО (для форм настройки интеграций)
============================================================ */
.modal-bd {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .175s var(--ease-system);
}
.modal-bd.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--canvas);
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s var(--ease-system);
}
.modal-bd.open .modal { transform: translateY(0); }
@media (min-width: 901px) {
  .modal-bd { align-items: center; }
  .modal { border-radius: var(--r-lg); transform: scale(0.96); }
  .modal-bd.open .modal { transform: scale(1); }
  /* Центрируем модалку по рабочей зоне (а не по всему вьюпорту):
     сдвигаем содержимое backdrop'а вправо на ширину сайдбара (240px),
     затем justify-content: center сам отцентрирует модалку в оставшемся
     пространстве. На экране входа сайдбара нет — там паддинг убираем. */
  .modal-bd { padding-left: 240px; }
  .app[data-screen="login"] .modal-bd { padding-left: 0; }
}
/* Когортная модалка — шире (таблица в 6-12 столбцов не помещается в 540px) */
.modal-bd.modal-wide .modal { max-width: 880px; }

.modal-h {
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.modal-title { font: 600 21px var(--font-display); letter-spacing: 0.231px; color: var(--ink); }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--canvas-parchment); color: var(--ink-muted-80);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0; line-height: 0; /* убираем baseline-смещение для идеального центра */
  transition: transform .12s, background .15s, color .15s;
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { background: var(--hairline); color: var(--ink); }
}
.modal-close:active { transform: scale(0.92); }
.modal-close svg { display: block; }
.modal-b {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 18px;
}
.modal-f {
  padding: 16px 20px;
  border-top: 1px solid var(--hairline);
  display: flex; gap: 10px;
  background: var(--canvas-parchment);
}
.modal-f .btn { flex: 1; padding: 12px 20px; font-size: 15px; }

/* Поля формы */
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink);
}
.form-field .hint {
  font: 400 12px/1.4 var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
}
.form-field .input,
.form-field .select,
.form-field .textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  /* 16px — порог авто-зума iOS Safari; ниже него поля форм приближаются при тапе */
  font: 400 16px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.form-field .textarea { min-height: 80px; font: 400 16px var(--font-mono); resize: vertical; }
.form-field .input:focus,
.form-field .select:focus,
.form-field .textarea:focus {
  border-color: var(--primary-focus);
  box-shadow: var(--focus-ring);
}

/* Список этапов с галочками */
.stages-grid {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.stages-head {
  display: grid; grid-template-columns: 1fr 80px 80px;
  padding: 10px 12px;
  background: var(--canvas-parchment);
  font: 600 11px var(--font-body); letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-muted-48);
  position: sticky; top: 0; z-index: 1;
}
.stages-row {
  display: grid; grid-template-columns: 1fr 80px 80px;
  padding: 10px 12px;
  align-items: center;
  border-top: 1px solid var(--divider-soft);
  font: 400 14px var(--font-body); color: var(--ink);
}
.stages-row:first-child { border-top: none; }
.stages-row label {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 28px;
  cursor: pointer;
}
.stages-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* 4-колоночный вариант — для воронок с настроенным промежуточным этапом */
.stages-head-4 { grid-template-columns: 1fr 70px 80px 70px; }
.stages-row-4  { grid-template-columns: 1fr 70px 80px 70px; }

.modal-status {
  padding: 12px 14px;
  border-radius: var(--r-md);
  font: 400 14px/1.4 var(--font-body); letter-spacing: -0.224px;
  margin-top: -4px;
}
.modal-status.ok    { background: var(--status-green-tint);  color: var(--status-green-on-tint); }
.modal-status.err   { background: var(--status-red-tint);    color: var(--status-red-on-tint); }
.modal-status.warn  { background: var(--status-orange-tint); color: var(--status-orange-on-tint); }
.modal-status.info  { background: rgba(0,102,204,.08);       color: var(--primary); }

/* ============================================================
   Кнопка ручного обновления (на главной)
============================================================ */
.refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  font: 400 11px var(--font-body); letter-spacing: -0.12px;
  transition: background .15s, color .15s, opacity .15s;
  cursor: pointer;
}
.refresh-btn:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
.refresh-btn:active:not(:disabled) { transform: scale(0.96); }
.refresh-btn:disabled,
.refresh-btn[disabled] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none; /* не реагировать ни на hover ни на click */
}
.refresh-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform .3s;
}
.refresh-btn.refreshing .refresh-icon {
  animation: refreshSpin 0.9s linear infinite;
}
@keyframes refreshSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   ИНТЕГРАЦИИ — карточки сервисов
============================================================ */
.integrations { display: flex; flex-direction: column; gap: 12px; }
.integ-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.integ-row {
  display: flex; align-items: center; gap: 14px;
}
.integ-logo {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--canvas);
}
.integ-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.integ-text { flex: 1; min-width: 0; }
.integ-name {
  font: 600 17px/1.24 var(--font-body);
  letter-spacing: -0.374px;
  color: var(--ink);
}
.integ-sub {
  font: 400 13px/1.3 var(--font-body);
  color: var(--ink-muted-48);
  letter-spacing: -0.12px;
  margin-top: 2px;
}
.integ-status {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px var(--font-body); letter-spacing: -0.12px;
  padding: 4px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.integ-status.ok      { background: var(--status-green-tint);  color: var(--status-green-on-tint); }
.integ-status.err     { background: var(--status-red-tint);    color: var(--status-red-on-tint); }
.integ-status.warn    { background: var(--status-orange-tint); color: var(--status-orange-on-tint); }
.integ-status.off     { background: var(--canvas-parchment);   color: var(--ink-muted-48); }
.integ-status .dot    { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.integ-actions {
  display: flex; gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--divider-soft);
}
.integ-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font: 600 14px var(--font-body); letter-spacing: -0.224px;
  transition: background .15s, transform .12s;
  text-align: center;
}
.integ-btn:active { transform: scale(0.97); }
.integ-btn.primary    { background: var(--primary); color: #fff; }
.integ-btn.primary:active { background: var(--primary-focus); }
.integ-btn.secondary  { background: var(--canvas-parchment); color: var(--primary); }
/* «Отключить» — приглушенная, без заливки; на наведение/нажатие краснеет */
.integ-btn.ghost {
  flex: 0 0 auto;
  background: transparent; color: var(--ink-muted-48);
  border: 1px solid var(--hairline);
}
.integ-btn.ghost:hover { color: var(--status-red-on-tint); border-color: var(--status-red-on-tint); }
.integ-btn:disabled, .integ-btn[disabled] {
  opacity: 0.5; cursor: not-allowed;
}

.integ-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px;
  font: 400 12px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
}
.integ-btn-link {
  background: transparent; border: none; padding: 0;
  font: inherit; color: var(--primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.integ-btn-link:hover { opacity: 0.8; }
.integ-btn-link:disabled { color: var(--ink-muted-48); cursor: default; }

/* ============================================================
   Состояния live-данных
============================================================ */
.bind-live { /* реальные данные пришли */ }
.bind-error {
  color: var(--ink-muted-48) !important;
  font-weight: 400 !important;
  font-style: italic;
  font-size: 0.85em !important;
}
.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-48);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--canvas-parchment);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-green);
  box-shadow: 0 0 0 0 var(--status-green);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(52,199,89,.6); }
  70% { box-shadow: 0 0 0 6px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}

/* === SVG иконки в bottom-nav === */
.bn-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.metric-hero-label svg, .list-row-r svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   ПЛАН/ФАКТ блок (главная)
============================================================ */
.pf-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
}
.pf-eyebrow {
  font: 400 14px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.224px;
}
.pf-value {
  font: 600 40px/1.10 var(--font-display);
  letter-spacing: -0.4px; color: var(--ink);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.pf-value .pf-unit { font-size: 22px; color: var(--ink-muted-48); font-weight: 400; }
.pf-plan {
  font: 400 14px var(--font-body); color: var(--ink-muted-48);
  margin-top: 4px; letter-spacing: -0.224px;
}
.pf-plan .pf-plan-num { color: var(--ink-muted-80); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-bar {
  height: 6px; background: var(--canvas-parchment); border-radius: var(--r-pill);
  margin-top: 14px; overflow: hidden;
}
.pf-bar-fill {
  height: 100%; background: var(--primary); border-radius: var(--r-pill);
  transition: width .4s var(--ease-system);
}
.pf-bar-fill.over { background: var(--status-orange); }
.pf-bar-fill.done { background: var(--status-green); }
.pf-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
  font: 400 13px var(--font-body); letter-spacing: -0.12px; color: var(--ink-muted-80);
}
.pf-foot .badge { margin-right: 2px; }

/* Маленькая «суб-метрика» внутри блока (например, кач.лиды под лидами) */
.pf-sub-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--divider-soft);
  margin-top: 14px;
}
.pf-sub-row + .pf-sub-row { margin-top: 0; }
.pf-sub-label { font: 400 14px var(--font-body); color: var(--ink-muted-80); letter-spacing: -0.224px; }
.pf-sub-value { font: 600 17px var(--font-body); color: var(--ink); letter-spacing: -0.374px; font-variant-numeric: tabular-nums; }
.pf-sub-plan { font: 400 12px var(--font-body); color: var(--ink-muted-48); margin-left: 6px; letter-spacing: -0.12px; }

/* ============================================================
   Бюджет — минималистичная карточка (Apple-style)
============================================================ */
.budget-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
/* Двухколоночная раскладка: Потрачено / Остаток на балансе */
.budget-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 24px;
  align-items: start;
}
.budget-split .budget-col { min-width: 0; }
.budget-split .budget-divider {
  background: var(--hairline);
  align-self: stretch;
  width: 1px;
}
@media (max-width: 700px) {
  /* На мобильном — в столбик с горизонтальной чертой между блоками */
  .budget-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .budget-split .budget-divider { height: 1px; width: 100%; }
  /* Приоритет — текущий баланс (контроль бюджета), он крупный. «Потрачено за
     период» (второй столбец) — вторично, уменьшаем, чтобы не конкурировал. */
  .budget-split .budget-col:last-child .budget-amount { font-size: 28px; }
}
.budget-eyebrow {
  font: 600 11px var(--font-body); letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-muted-48);
  margin-bottom: 12px;
}
.budget-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.budget-amount {
  font: 600 38px/1.05 var(--font-display); letter-spacing: -0.4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.budget-plan-text {
  font: 400 14px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink-muted-48);
  margin-top: 10px;
}
.budget-plan-text [data-bind="plan.spend"] { color: var(--ink); font-weight: 600; }

/* Дельта к прошлому периоду на главной — pill + текстовая подпись.
   Без переноса между pill и текстом: pill всегда слева, текст справа в одну строку.
   Если ширины не хватает — переносится только сам текст подписи внутри своей колонки. */
.budget-foot-simple {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 12px;
}
.budget-foot-simple .metric-row-delta { flex-shrink: 0; }
.budget-foot-simple .budget-foot-label { min-width: 0; font-size: 13px; line-height: 1.3; }
.budget-foot-simple:empty { display: none; }
.budget-foot-simple .metric-row-delta { margin-left: 0; }
.budget-foot-label {
  font: 400 14px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}

.budget-status-badge {
  padding: 6px 14px; border-radius: var(--r-pill);
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.budget-status-badge.ok     { background: var(--status-green-tint);  color: var(--status-green-on-tint); }
.budget-status-badge.warn   { background: var(--status-orange-tint); color: var(--status-orange-on-tint); }
.budget-status-badge.danger { background: var(--status-red-tint);    color: var(--status-red-on-tint); }
.budget-status-badge.info   { background: var(--primary-tint);       color: var(--primary); }

.budget-progress-bar {
  position: relative;
  height: 8px;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.budget-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: width .5s var(--ease-system), background .15s;
  min-width: 4px;
}
.budget-progress-fill.warn   { background: var(--status-orange); }
.budget-progress-fill.danger { background: var(--status-red); }
.budget-progress-fill.done   { background: var(--status-green); }

.budget-forecast {
  margin-top: 16px;
  font: 400 13px/1.4 var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-80);
}
.budget-forecast b { color: var(--ink); font-weight: 600; }
.budget-forecast.empty { display: none; }

@media (max-width: 700px) {
  .budget-head { flex-direction: column-reverse; align-items: flex-start; }
  .budget-status-badge { align-self: flex-start; }
}

/* ============================================================
   Главная — компактные плитки метрик
============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.tile {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  min-height: 100px;
}
/* Кнопка-подсказка «?» рядом с label плитки.
   Тап показывает подсказку через :focus (работает и на мобильном),
   повторный тап вне кнопки — закрывает. */
.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  font: 600 11px var(--font-body);
  cursor: pointer;
  border: none;
  vertical-align: middle;
  transition: background .15s, color .15s;
}
.info-tip:hover, .info-tip:focus { background: var(--primary-tint); color: var(--primary); outline: none; }
.info-tip { position: relative; }
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: var(--inverse-surface);
  color: var(--inverse-ink);
  padding: 10px 12px;
  border-radius: 8px;
  font: 400 12px/1.4 var(--font-body);
  letter-spacing: -0.12px;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 50;
}
.info-tip:hover::after,
.info-tip:focus::after,
.info-tip.is-open::after { opacity: 1; }

/* На мобильном — подсказка как fixed-плашка над нижним таб-баром.
   ВАЖНО: position: fixed, чтобы не расширять body (иначе появляется горизонтальный
   скролл и нижний таб-бар отрывается от правого края). */
@media (max-width: 700px) {
  .info-tip::after {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 80px;            /* выше нижнего таб-бара */
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    font-size: 13px;
    padding: 12px 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    z-index: 100;
  }
}

.tile-label {
  font: 400 12px var(--font-body); letter-spacing: -0.16px;
  color: var(--ink-muted-48);
  /* В одну строку — длинные подписи типа «Стоимость кач. лида» иначе ломаются на 2 строки.
     На совсем узких экранах добавляем многоточие — но при 12px шрифте 19 символов
     уверенно помещаются в плитку шириной ~165px. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Если внутри label есть кнопка-подсказка (?), не обрезаем — иначе всплывашка
   будет скрыта overflow:hidden родителя. */
.tile-label:has(.info-tip) { overflow: visible; }
.tile-value {
  font: 600 26px/1.1 var(--font-display);
  letter-spacing: -0.3px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.tile-value .plan {
  font: 400 15px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.224px;
}
.tile-bar {
  height: 3px; background: var(--canvas-parchment);
  border-radius: var(--r-pill); overflow: hidden;
  margin-top: 2px;
}
.tile-bar-fill {
  height: 100%; background: var(--primary);
  border-radius: var(--r-pill);
  transition: width .4s var(--ease-system);
}
.tile-bar-fill.over { background: var(--status-orange); }
.tile-bar-fill.done { background: var(--status-green); }

/* Кликабельные плитки (выбор метрики для графика) */
.tile.selectable { cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; }
/* Hover — только на устройствах с настоящим курсором (не «прилипает» после тапа на телефоне) */
@media (hover: hover) and (pointer: fine) {
  .tile.selectable:hover { border-color: var(--ink-muted-48); }
}
.tile.selectable:active { transform: scale(0.985); }
/* При выборе плитки цвет берется из --tile-color (выставляется JS-ом в зависимости
   от того, под какой цвет графика плитка идет: синий/зеленый/оранжевый). */
.tile.selectable.is-selected {
  border-color: var(--tile-color, var(--primary));
  box-shadow: 0 0 0 1px var(--tile-color, var(--primary)) inset;
}
.tile.selectable.is-selected .tile-label { color: var(--tile-color, var(--primary)); }

/* Заблокированная плитка — когда уже выбрано 3 метрики и кликать новые нельзя.
   Приглушаем визуально и блокируем hover-эффекты. */
.tile.selectable.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.tile.selectable.is-locked:hover { border-color: var(--hairline); }
.tile.selectable.is-locked:active { transform: none; }

/* ============================================================
   ГРАФИК ДИНАМИКИ (между бюджетом и плитками)
============================================================ */
.chart-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px 20px 14px;
}
.chart-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
/* Левая колонка chart-head: заголовок + табы. Стэкаем вертикально, выравниваем по левому краю. */
.chart-head > div:first-child {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.chart-title {
  font: 600 17px/1.2 var(--font-display); color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0;
}
/* Табы гранулярности под заголовком графика: День / Неделя / Месяц */
.chart-gran-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0;             /* убрали margin-top — gap у родителя дает нужное расстояние */
  padding: 2px;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill);
  align-self: flex-start; /* строго по левому краю, не растягиваясь */
}
.chart-gran-tab {
  height: 26px;
  padding: 0 12px;
  border: none; background: transparent;
  color: var(--ink-muted-80);
  font: 600 11px var(--font-body);
  letter-spacing: -0.1px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chart-gran-tab.active {
  background: var(--canvas);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.chart-gran-tab:disabled { opacity: 0.35; cursor: not-allowed; }
.chart-trend {
  font: 600 12px var(--font-body); letter-spacing: -0.12px;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--canvas-parchment); color: var(--ink-muted-48);
}
.chart-trend.up   { background: var(--status-green-tint); color: var(--status-green-on-tint); }
.chart-trend.down { background: var(--status-red-tint);   color: var(--status-red-on-tint); }
.chart-body {
  position: relative;
  height: 240px;
  width: 100%;
  /* Touch UX на мобильном:
     - touch-action: none → жест целиком наш. С pan-y браузер при горизонтальном
       ведении пальцем перехватывал вертикальный «снос» под скролл и слал
       pointercancel → тултип сбрасывался на полпути. none убирает перехват, и
       палец ведет по всему графику без сброса (страницу скроллим вне графика).
     - user-select/touch-callout: none → long-press не выделяет текст и не вызывает iOS callout.
     - tap-highlight: transparent → нет синей вспышки при тапе по графику.
     - cursor: crosshair → на десктопе показывает, что чарт «отслеживает» курсор. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}
/* Tooltip — тоже без selection, чтобы случайно не выделить цифры */
.chart-tooltip { user-select: none; -webkit-user-select: none; }
/* Карточка графика — не даем tooltip'у вылазить за ее края (он позиционируется absolute) */
.chart-card { overflow-x: clip; }
/* Все внутренние SVG-элементы (линии, заливки, сетка) НЕ перехватывают touch —
   только chart-body ловит события. Иначе hover «прыгает» когда палец на пути линии. */
.chart-line,
.chart-area,
.chart-grid,
.chart-hover-line,
.chart-svg text { pointer-events: none; }
/* На мобильном — карточка с минимальными боковыми отступами, чтобы линия графика
   занимала максимум доступной ширины. Высота умеренная. */
@media (max-width: 700px) {
  .chart-card  { padding: 14px 8px 10px; }
  .chart-body  { height: 240px; }
  .chart-title { font-size: 15px; padding: 0 8px; }
  /* Линия на мобильном чуть толще — лучше видна при касании */
  .chart-line { stroke-width: 2.5; }
  .chart-dot  { stroke-width: 2.5; r: 6; }
}
.chart-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Цвета линий: 3 серии графика. Цвет задается через CSS-переменную (inline на path). */
:root {
  --chart-color-1: #0066cc;   /* синий */
  --chart-color-2: #16a766;   /* зеленый */
  --chart-color-3: #ff9500;   /* оранжевый */
}
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { opacity: 0.16; }
.chart-grid { stroke: var(--hairline); stroke-width: 1; }

/* Появление графика: легкое выезжание снизу + fade-in.
   Каждая серия (линия + ее area-заливка) запускается с небольшой задержкой,
   чтобы при множественном выборе они «прибывали» одна за другой. */
@keyframes chart-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chart-line,
.chart-area {
  animation: chart-enter 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--chart-enter-delay, 0ms);
  /* Опасные комбинации transform-box/origin не нужны: translateY работает
     корректно без них, потому что сдвиг — относительный. */
}
/* Линия — чуть позже своей area, чтобы был визуальный «след». */
.chart-line { animation-delay: calc(var(--chart-enter-delay, 0ms) + 80ms); }
.chart-dot {
  fill: var(--canvas); stroke-width: 2;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.chart-dot.show { opacity: 1; }
.chart-hover-line { stroke: var(--ink-muted-48); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.chart-hover-line.show { opacity: 0.5; }
.chart-tooltip {
  position: absolute;
  background: var(--inverse-surface); color: var(--inverse-ink);
  padding: 8px 12px; border-radius: 8px;
  font: 600 12px var(--font-body); letter-spacing: -0.12px;
  pointer-events: none; transform: translate(-50%, -100%);
  white-space: nowrap;
  z-index: 5;
  min-width: 120px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.chart-tooltip-date { font-weight: 400; opacity: 0.7; margin-top: 4px; font-size: 11px; }
.chart-tooltip-row {
  display: flex; align-items: center; gap: 6px;
  padding: 1px 0;
}
.chart-tooltip-row + .chart-tooltip-row { margin-top: 2px; }
.chart-tooltip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.chart-tooltip-label {
  font-weight: 400; opacity: 0.7; font-size: 11px;
  flex: 1; min-width: 0;
}
.chart-tooltip-val {
  font-weight: 600; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chart-xaxis {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font: 400 11px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
}

/* Легенда под графиком — цветные чипы. */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.chart-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px var(--font-body); color: var(--ink-muted-80);
  letter-spacing: -0.12px;
  padding: 4px 10px;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill, 999px);
}
.chart-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.chart-legend-empty {
  font: 400 12px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
  padding: 4px 0;
}
.chart-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-muted-48); font: 400 13px var(--font-body);
}

/* ============================================================
   МЕНЕДЖЕРЫ — таблица с per-менеджер статистикой
============================================================ */
.mgr-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.mgr-row {
  display: grid;
  /* 8 колонок: Менеджер | Лиды | %В кач | Кач | %В сделку | Сделки | Средний чек | Выручка */
  grid-template-columns: 2.2fr 0.7fr 0.85fr 0.75fr 0.85fr 0.7fr 0.95fr 0.95fr;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
/* С промежуточным этапом — 10 колонок: + «Конв. в Замер» + «Замер» */
.mgr-row.has-intermediate {
  grid-template-columns: 1.7fr 0.55fr 0.65fr 0.55fr 0.65fr 0.55fr 0.65fr 0.55fr 0.85fr 0.85fr;
  gap: 7px;
}
.mgr-row.has-intermediate .mgr-cell { font-size: 13px; }
.mgr-row:last-child { border-bottom: none; }
.mgr-head {
  background: var(--canvas-parchment);
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-48);
  padding: 10px 18px;
}
.mgr-head .mgr-cell { font-weight: 600; }
.mgr-total {
  background: var(--canvas-parchment);
  font-weight: 600;
}
.mgr-name {
  display: flex; align-items: center; gap: 10px;
  font: 600 14px var(--font-body); letter-spacing: -0.224px; color: var(--ink);
  min-width: 0;
}
.mgr-name-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgr-av {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--font-body); letter-spacing: -0.06px;
}
.mgr-cell {
  font: 400 14px var(--font-body); color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: -0.224px;
}
.mgr-revenue { color: var(--ink); font-weight: 600; }

/* Кнопка «скрыть менеджера» — в строке имени, иконка глаза с перечеркиванием */
.mgr-hide-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink-muted-48);
  border: none; padding: 0; line-height: 0;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.mgr-hide-btn svg { display: block; }
/* На десктопе показываем только при hover на строке. На мобильном — всегда видна. */
@media (hover: hover) and (pointer: fine) {
  .mgr-row:hover .mgr-hide-btn { opacity: 1; }
  .mgr-hide-btn:hover { background: var(--canvas-parchment); color: var(--status-red-on-tint); }
}
@media (max-width: 900px) {
  .mgr-hide-btn { opacity: 0.5; }
  .mgr-hide-btn:active { opacity: 1; }
}

/* Бейдж «скрытых» — под таблицей, после статистики */
.mgr-hidden-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  margin-top: 12px;
  background: var(--canvas-parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font: 500 13px var(--font-body);
  color: var(--ink-muted-80);
  letter-spacing: -0.12px;
}
.mgr-hidden-badge b { color: var(--ink); font-weight: 600; }
.mgr-hidden-show-btn {
  margin-left: auto;
  padding: 4px 12px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--primary);
  border: 1px solid var(--hairline);
  font: 600 12px var(--font-body); letter-spacing: -0.12px;
  cursor: pointer;
  transition: border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
  .mgr-hidden-show-btn:hover { border-color: var(--primary); }
}

/* === Список скрытых менеджеров в модалке === */
.hidden-mgr-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.hidden-mgr-row {
  display: flex; align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--canvas-parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  min-width: 0;
}
.hidden-mgr-av {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px var(--font-body); letter-spacing: -0.06px;
}
.hidden-mgr-info {
  flex: 1;
  min-width: 0;          /* критично для ellipsis в flex-ребенке */
  display: flex; flex-direction: column;
  gap: 2px;
}
.hidden-mgr-name {
  font: 600 14px var(--font-body); letter-spacing: -0.16px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hidden-mgr-sub {
  font: 400 12px var(--font-body); letter-spacing: -0.1px;
  color: var(--ink-muted-48);
  white-space: nowrap;
}
.hidden-mgr-restore {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--primary);
  border-radius: var(--r-pill);
  font: 600 13px var(--font-body); letter-spacing: -0.16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
@media (hover: hover) and (pointer: fine) {
  .hidden-mgr-restore:hover {
    border-color: var(--primary);
    background: var(--primary-tint);
  }
}
.hidden-mgr-restore:active { transform: scale(0.96); }

/* На мобильном — слегка компактнее, чтобы аватарка + имя + кнопка влезли в 343px */
@media (max-width: 700px) {
  .hidden-mgr-row { padding: 10px 12px; gap: 10px; }
  .hidden-mgr-av { width: 30px; height: 30px; font-size: 10px; }
  .hidden-mgr-name { font-size: 13px; }
  .hidden-mgr-sub { font-size: 11px; }
  .hidden-mgr-restore { height: 30px; padding: 0 12px; font-size: 12px; }
}

/* ============================================================
   ГРАФИК СРАВНЕНИЯ МЕНЕДЖЕРОВ (над таблицей)
============================================================ */
.mgr-chart-card { margin-bottom: 20px; }
.mgr-chart-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.mgr-chart-toolbar-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.mgr-chart-toolbar-label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted-48);
  flex: 0 0 80px;
  min-width: 80px;
}
.mgr-chart-metric-tabs,
.mgr-chart-mgr-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1;
}
.mgr-pill {
  display: inline-flex; align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  font: 600 12px var(--font-body);
  letter-spacing: -0.12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .mgr-pill:hover:not(.is-locked) { background: var(--hairline); }
}
.mgr-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* Цвет активного pill менеджера задается переменной --pill-color (JS-ом) */
.mgr-pill.active-color {
  background: var(--pill-color, var(--primary));
  color: #fff;
  border-color: var(--pill-color, var(--primary));
}
.mgr-pill.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  /* На мобильном — стэкаем подпись и pills вертикально.
     Это решает проблему обрезания «МЕНЕДЖЕРЫ» (9 букв в верхнем регистре
     с letter-spacing не помещались в фиксированную ширину 64px) и дает
     pills всю ширину строки для wrap'а при 7+ менеджерах. */
  .mgr-chart-toolbar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .mgr-chart-toolbar-label {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 10px;
  }
  .mgr-chart-metric-tabs,
  .mgr-chart-mgr-pills { width: 100%; }
  .mgr-pill { height: 28px; font-size: 11px; padding: 0 10px; }
}

/* Мобильный футер карточки — скрыт на десктопе. */
.mgr-mfoot { display: none; }

/* ============================================================
   Карточный режим — на мобильном и планшете (≤900px).
   Семь-девять узких колонок таблицы не помещаются — переходим в карточки:
   - Шапка: аватар + имя
   - Funnel-чипы: компактный grid 4 (или 5 с замером) колонок "число / подпись"
   - Футер: крупная выручка + одна ключевая конверсия
   Проценты между этапами на мобильном скрываем — они мешают сканированию.
============================================================ */
@media (max-width: 900px) {
  .mgr-card { padding: 0; border-radius: var(--r-md); }
  /* Шапка таблицы прячется на мобильном. Спецификность ".mgr-row.mgr-head" выше,
     чем у ".mgr-row" ниже — иначе display:flex от .mgr-row перебивает display:none. */
  .mgr-row.mgr-head { display: none; }

  /* Каждый менеджер = карточка-секция: flex-wrap для шапки/чипов/футера. */
  .mgr-row {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--hairline);
    grid-template-columns: none;
  }
  .mgr-row:last-child { border-bottom: none; }

  /* Шапка: аватар + имя, занимает всю ширину */
  .mgr-name {
    flex: 1 1 100%;
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 6px 0;
    padding: 0;
    border-bottom: none;
    font: 600 15px var(--font-body); letter-spacing: -0.24px;
  }
  .mgr-name-text {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mgr-av { width: 36px; height: 36px; font-size: 12px; }

  /* Скрываем процентные ячейки и денежную (выручка → в футер) */
  .mgr-cell--pct,
  .mgr-cell--money { display: none; }

  /* Funnel-чипы: 4 или 5 равных колонок (с замером). */
  .mgr-cell--num {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    background: var(--canvas-parchment);
    border-radius: 10px;
    font: 600 18px var(--font-display);
    letter-spacing: -0.3px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: left;
  }
  .mgr-cell--num::before {
    content: attr(data-label);
    font: 400 11px var(--font-body); color: var(--ink-muted-48);
    letter-spacing: -0.1px;
    order: 2;
    /* Длинные подписи («Кач. лиды») в узком чипе обрезаем многоточием. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Футер карточки: конверсии (лид→кач, кач→замер, замер→сделка) + выручка */
  .mgr-mfoot {
    display: block;
    flex: 1 1 100%;
    margin: 6px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
  }
  /* Под-секция «Конверсии» — отделена от выручки */
  .mgr-mfoot-section {
    display: block;
  }
  .mgr-mfoot-section + .mgr-mfoot-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
  }
  .mgr-mfoot-section-title {
    font: 600 11px var(--font-body);
    color: var(--ink-muted-48);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .mgr-mfoot-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
  }
  .mgr-mfoot-label {
    font: 400 13px var(--font-body); color: var(--ink-muted-80);
    letter-spacing: -0.16px;
    /* Длинные подписи конверсий могут не влезть на узких экранах — обрезаем. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .mgr-mfoot-val {
    font: 600 15px var(--font-body); color: var(--ink);
    letter-spacing: -0.24px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .mgr-mfoot-val--revenue {
    font: 600 19px var(--font-display);
    color: var(--ink);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
  }

  /* Итоговая карточка — выделена */
  .mgr-total { background: var(--canvas-parchment); }
  .mgr-total .mgr-name { color: var(--primary); }
  .mgr-total .mgr-cell--num { background: var(--canvas); }
}

/* Узкий мобильный (≤480px) — 5 чипов в ряд тесно, переносим:
   - С замером (5 чипов): 3+2 (3 в строке 1, 2 в строке 2)
   - Без замера (4 чипа): остаются в одной строке (узко, но влезает)
   На ≤360px (старые/узкие телефоны) — и 4 чипа делятся 2+2. */
@media (max-width: 480px) {
  .mgr-row.has-intermediate .mgr-cell--num {
    flex: 0 1 calc(33.333% - 6px);
  }
  .mgr-cell--num { font-size: 17px; padding: 9px 10px; }
}
@media (max-width: 360px) {
  .mgr-row .mgr-cell--num {
    flex: 0 1 calc(50% - 4px);
  }
  .mgr-row.has-intermediate .mgr-cell--num {
    flex: 0 1 calc(33.333% - 6px);
  }
}
.tile-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto;
}

/* Плитки «Статус лидов» — кликабельны, открывают попап-список */
.lead-status-tile { cursor: pointer; transition: background .15s; }
.lead-status-tile:hover { background: var(--canvas-parchment); }
.lead-status-tile .tile-sub {
  font: 400 12px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
}

/* Шире модалку для попапа лидов (агрегация + таблица).
   Min-height: 80vh — даже когда сделок мало, окно остается просторным
   и не «съеживается» в узкую полоску. */
.modal:has(.leads-modal) {
  max-width: 880px;
  min-height: 80vh;
}
.modal:has(.leads-modal) .modal-b { padding: 0; flex: 1; display: flex; flex-direction: column; }
.leads-modal { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (max-width: 700px) {
  /* На мобильном модалка едет снизу как панель — пусть тоже растягивается */
  .modal:has(.leads-modal) { min-height: 75vh; }
}

/* Шапка агрегации: заголовок слева, счетчик справа */
.leads-agg-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 8px;
}
.leads-agg-title {
  font: 600 13px var(--font-body);
  color: var(--ink-muted-48);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.leads-agg-counter {
  font: 400 13px var(--font-body);
  color: var(--ink-muted-80);
  font-variant-numeric: tabular-nums;
}
.leads-agg-counter b { font-weight: 600; color: var(--ink); }

/* Список «причина / этап» с чекбоксом */
.leads-agg-list {
  display: flex; flex-direction: column;
  padding: 0 12px 8px;
  max-height: 240px;
  overflow-y: auto;
  transition: max-height .2s ease;
  flex-shrink: 0;                 /* не даем flex-контейнеру «съесть» список */
}
/* После «Открыть сделки» — фильтр сжимаем, но не до невидимости.
   Высота гарантирует видимость 3-4 первых строк причин/этапов,
   их сразу можно отметить чекбоксом не закрывая таблицу. */
.leads-modal.is-expanded .leads-agg-list {
  max-height: 160px;
  min-height: 120px;              /* фикс: фильтр не исчезает на маленьких экранах */
}
.leads-modal.is-expanded .leads-agg-head { padding-top: 12px; padding-bottom: 4px; }
.leads-agg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
  user-select: none;
}
.leads-agg-row:hover { background: var(--canvas-parchment); }
.leads-agg-row.is-selected { background: var(--primary-tint); }
.leads-agg-row input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--primary);
  flex: 0 0 16px;
}
.leads-agg-name {
  flex: 1 1 auto;
  font: 500 13px var(--font-body);
  color: var(--ink);
}
.leads-agg-count {
  flex: 0 0 auto;
  font: 600 13px var(--font-body);
  color: var(--ink-muted-80);
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}
.leads-agg-row.is-selected .leads-agg-count { color: var(--primary); }

/* Кнопки внизу — компактные, без перевеса размера */
.leads-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
}
.leads-modal-actions .btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  min-height: 0;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 700px) {
  .leads-modal-actions .btn { padding: 9px 16px; font-size: 13px; }
}

/* Таблица сделок (разворачивается под кнопкой) — занимает оставшееся место
   и скроллится внутри. Без жесткого max-height, чтобы окно использовалось полностью. */
.leads-popup-tbl-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--hairline);
}

/* Таблица лидов в попапе */
.leads-popup-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leads-popup-table thead th {
  text-align: left;
  font: 500 12px var(--font-body);
  color: var(--ink-muted-48);
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-parchment);
  position: sticky; top: 0; z-index: 1;
}
.leads-popup-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--divider-soft);
  vertical-align: top;
  color: var(--ink);
}
.leads-popup-table tbody tr:last-child td { border-bottom: none; }
/* Hover убран — отвлекает и выглядит «ужасно». Ссылка-ID сама визуально интерактивна. */
.leads-popup-table .lead-id {
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.leads-popup-table .lead-id:hover { text-decoration: underline; }
.leads-popup-table .lead-status {
  font-size: 12px;
  color: var(--ink-muted-80);
  white-space: nowrap;
}
.leads-popup-table .lead-price,
.leads-popup-table .lead-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted-80);
}
.leads-popup-table .lead-price.empty,
.leads-popup-table .lead-date.empty { color: var(--ink-muted-48); }
.leads-popup-table .lead-loss-reason {
  font-size: 12px;
  color: var(--status-red, #cf2a2a);
  white-space: nowrap;
}
.leads-popup-table .lead-loss-reason.empty { color: var(--ink-muted-48); }
.leads-popup-empty {
  text-align: center; padding: 40px 12px;
  color: var(--ink-muted-48); font-size: 13px;
}

/* На мобильном — компактная горизонтальная таблица (как в Ройстате).
   Длинные статусы и причины обрезаются ellipsis. */
@media (max-width: 700px) {
  .leads-popup-table { font-size: 12px; }
  .leads-popup-table thead th {
    padding: 8px 6px;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .leads-popup-table tbody td {
    padding: 10px 6px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;          /* трюк: max-width 1px + width:auto в реальной ячейке + ellipsis */
  }
  /* Ширины колонок по содержимому. Первая (ID) — фиксированный размер,
     остальные — гибкие, статус и причина обрезаются с многоточием. */
  .leads-popup-table tbody td.lead-name-cell { width: 86px; max-width: 86px; }
  .leads-popup-table tbody td.lead-status    { max-width: 110px; color: var(--ink-muted-80); }
  .leads-popup-table tbody td.lead-price     { width: 78px; max-width: 78px; text-align: right; }
  .leads-popup-table tbody td.lead-loss-reason { max-width: 100px; }
}

/* ============================================================
   Главная — строки метрик с план/факт и дельта (legacy)
============================================================ */
.metric-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.metric-row-label {
  font: 400 14px var(--font-body); color: var(--ink-muted-80);
  letter-spacing: -0.224px;
}
.metric-row-values {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.metric-row-fact {
  font: 600 24px/1.1 var(--font-display); color: var(--ink);
  letter-spacing: -0.2px;
}
.metric-row-plan {
  font: 400 15px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.224px;
}
.metric-row-delta {
  display: inline-flex; align-items: center; gap: 2px;
  font: 600 12px var(--font-body); letter-spacing: -0.12px;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--canvas-parchment);
  color: var(--ink-muted-48);
  margin-left: 4px;
  white-space: nowrap;
}
.metric-row-delta.up   { background: var(--status-green-tint); color: var(--status-green-on-tint); }
.metric-row-delta.down { background: var(--status-red-tint);   color: var(--status-red-on-tint); }
.metric-row-delta.flat { background: var(--canvas-parchment);  color: var(--ink-muted-48); }

/* Тонкая полоска прогресса (под метриками результата) */
.pf-bar-thin { height: 4px !important; margin-top: 8px; }

/* Уведомление / алерт на главной */
.notif-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: background .15s;
}
.notif-card + .notif-card { margin-top: 8px; }
.notif-card.clickable { cursor: pointer; }
.notif-card.clickable:hover { background: var(--canvas-parchment); }
.notif-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.notif-icon.warn   { background: var(--status-orange-tint); color: var(--status-orange-on-tint); }
.notif-icon.danger { background: var(--status-red-tint);    color: var(--status-red-on-tint); }
.notif-icon.info   { background: var(--primary-tint);       color: var(--primary); }
.notif-icon.success{ background: var(--status-green-tint);  color: var(--status-green-on-tint); }
.notif-text { flex: 1; min-width: 0; }
.notif-title { font: 600 15px var(--font-body); letter-spacing: -0.224px; color: var(--ink); }
.notif-sub   { font: 400 13px/1.4 var(--font-body); letter-spacing: -0.12px; color: var(--ink-muted-80); margin-top: 2px; }
.notif-arrow { color: var(--ink-muted-48); font-size: 18px; flex-shrink: 0; }

/* Подпись прогноза в footer бюджета */
.budget-forecast {
  font: 400 13px/1.4 var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-80);
}
.budget-forecast b { font-weight: 600; color: var(--ink); }

/* ============================================================
   ВОРОНКА v2 — модерн визуализация
============================================================ */
.funnel-v2 {
  display: flex; flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.fv2-stage {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  position: relative;
}
@media (max-width: 700px) {
  /* На мобильном — компактная двухстолбцовая раскладка, без раздувания по высоте */
  .funnel-v2 { padding: 16px 14px; }
  .fv2-stage {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 10px 0;
  }
  .fv2-stage-left  { grid-column: 1; grid-row: 1; }
  .fv2-stage-right { grid-column: 2; grid-row: 1; text-align: right !important; font-size: 18px; }
  .fv2-stage-bar-wrap { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .fv2-stage-right .cost { margin-top: 2px; font-size: 11px; }
  .fv2-stage-name { font-size: 13px; }
  .fv2-stage-sub  { font-size: 11px; }
}
.fv2-stage-left {
  display: flex; flex-direction: column; gap: 2px;
}
.fv2-stage-name {
  font: 600 14px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink);
}
.fv2-stage-sub {
  font: 400 12px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-48);
}
.fv2-stage-bar-wrap {
  position: relative;
  height: 36px;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.fv2-stage-bar {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width .6s var(--ease-system);
}
.fv2-stage-bar.c-1 { background: linear-gradient(90deg, #AF52DE 0%, #5856D6 100%); }
.fv2-stage-bar.c-2 { background: linear-gradient(90deg, #5856D6 0%, #007AFF 100%); }
.fv2-stage-bar.c-3 { background: linear-gradient(90deg, #007AFF 0%, #34C759 100%); }
.fv2-stage-bar.c-4 { background: linear-gradient(90deg, #34C759 0%, #30D158 100%); }
.fv2-stage-bar.c-5 { background: linear-gradient(90deg, #FF9500 0%, #FF3B30 100%); }
.fv2-stage-right {
  text-align: right;
  font: 600 22px/1 var(--font-display);
  letter-spacing: -0.2px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fv2-stage-right .cost {
  font: 400 12px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-48); margin-top: 4px; display: block;
}

/* Соединитель — компактная строка между этапами: ↓ 12% · название */
.fv2-conn {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 4px 24px;
  margin: 0;
}
.fv2-conn-arrow {
  font-size: 16px; color: var(--ink-muted-48); line-height: 1;
}
.fv2-conn-pct {
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--canvas-parchment); color: var(--ink);
}
.fv2-conn-pct.bad { background: var(--status-red-tint); color: var(--status-red-on-tint); }
.fv2-conn-pct.good { background: var(--status-green-tint); color: var(--status-green-on-tint); }
.fv2-conn-label {
  font: 400 12px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-48);
}

/* ============================================================
   ВОРОНКА (legacy)
============================================================ */
.funnel { display: flex; flex-direction: column; gap: 0; }
.funnel-stage {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px 18px;
  position: relative;
}
.funnel-stage + .funnel-stage { margin-top: 8px; }
.funnel-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.funnel-label {
  font: 600 17px var(--font-body); color: var(--ink);
  letter-spacing: -0.374px;
}
.funnel-value {
  font: 600 21px var(--font-display); color: var(--ink);
  letter-spacing: 0.231px; font-variant-numeric: tabular-nums;
}
.funnel-bar-wrap {
  height: 8px;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.funnel-bar {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: width .4s var(--ease-system);
}
/* Стрелка-переход с конверсией */
.funnel-conn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 0 4px;
  font: 400 12px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.12px;
}
.funnel-conn .conn-arrow { color: var(--ink-muted-48); font-size: 14px; }
.funnel-conn .conn-pct { font-weight: 600; color: var(--ink-muted-80); font-variant-numeric: tabular-nums; }

/* ============================================================
   ОТЧЕТ — таблица план/факт по месяцам
============================================================ */
.report-wrap {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.report-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.report-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font: 400 13px var(--font-body); letter-spacing: -0.12px;
}
.report-table th, .report-table td {
  padding: 10px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-bottom: 1px solid var(--divider-soft);
}
.report-table th {
  font: 600 11px var(--font-body); letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted-48);
  background: var(--canvas-parchment);
  position: sticky; top: 0; z-index: 2;
}
.report-table th:first-child, .report-table td:first-child {
  text-align: left;
  position: sticky; left: 0; z-index: 1;
  background: var(--canvas);
  min-width: 180px;
}
.report-table th:first-child { z-index: 3; background: var(--canvas-parchment); }
.report-table tr.report-section td {
  background: var(--canvas-parchment);
  font: 600 11px var(--font-body); letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted-48);
  padding: 12px;
}
.report-table tr.report-row-fact td:first-child {
  color: var(--ink); font-weight: 600;
}
.report-table .report-cell {
  display: inline-flex; align-items: baseline; gap: 6px; justify-content: flex-end;
}
.report-table .report-fact { color: var(--ink); font-weight: 600; }
.report-table .report-plan { color: var(--ink-muted-48); font: 400 12px var(--font-body); letter-spacing: -0.12px; }
.report-table .report-delta { font: 600 12px var(--font-body); letter-spacing: -0.12px; }
.report-table .report-delta.up    { color: var(--status-green-on-tint); }
.report-table .report-delta.down  { color: var(--status-red-on-tint); }
.report-table .report-delta.flat  { color: var(--ink-muted-48); }
.report-table td.cell-bad  { background: rgba(255,59,48,.04); }
.report-table td.cell-good { background: rgba(52,199,89,.04); }

/* Переключатель периода */
.seg {
  display: inline-flex;
  background: var(--canvas-parchment);
  border-radius: var(--r-pill);
  padding: 3px;
}
.seg button {
  padding: 6px 14px;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink-muted-80);
  border-radius: var(--r-pill);
  transition: background .15s, color .15s;
}
.seg button.active { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* ============================================================
   ПЛАНШЕТ (701–900px) — iPad mini портрет (~768px) и прочие планшеты
   ------------------------------------------------------------
   Раньше этот диапазон проваливался в «дырку» между мобильным (≤700px) и
   десктопом (≥901px): применялось дефолтное правило .app{max-width:480px} —
   узкая колонка по центру с огромными пустыми полями по бокам. Отсюда все
   жалобы разом: рабочая зона узкая; шапка тесная (кнопки/чип жмутся в 480px);
   крупные числа (бюджет 38px) упирались в границы узких колонок; по бокам
   «гулял» фон (пустые поля шире самого контента). Сайдбар тут НЕ включаем —
   на портретном планшете он съел бы ~240px; оставляем мобильную нижнюю
   навигацию, но расширяем сам контент почти на всю ширину устройства.
============================================================ */
@media (min-width: 701px) and (max-width: 900px) {
  /* Рабочая зона — во всю ширину планшета (поля задаёт padding .content). */
  .app { max-width: 100%; }

  /* Больше воздуха по бокам — заголовок шапки и блоки контента встают на одну
     вертикальную сетку (28px), как на десктопе. */
  .content { padding: 20px 28px calc(100px + env(safe-area-inset-bottom)); }
  .topbar  { padding: calc(14px + env(safe-area-inset-top)) 28px 16px; }
  .topbar-title { font-size: 24px; }

  /* Нижняя навигация — во всю ширину экрана (была прибита к 480/600px по центру
     и висела узкой полоской с «обрезанными» краями на широком планшете). */
  .bottomnav { max-width: none; }

  /* Бюджет: значения остаются крупными, но в широких колонках (planшет даёт
     ~340px на колонку против ~210px в старой 480-колонке) не упираются в край. */
  .budget-amount { font-size: 34px; }

  /* Экран входа — форма аккуратной колонкой по центру, чтобы кнопка «Войти»
     была ровно по ширине поля и OTP-ячеек (6×48 + 5×8 = 328px), а не шире их.
     max-width 372 − 2×22 padding = 328 ровно под OTP. */
  .login-wrap { max-width: 372px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }

  /* Баннер «вернуться к аккаунтам»: на планшете верхняя системная полоса iPad
     перекрывает верх баннера. Чтобы текст смотрелся по центру ВИДИМОЙ части (ниже
     полосы), отступ сверху делаем заметно больше нижнего — текст смещается вниз,
     из-под перекрытия. Префикс html повышает специфичность (0,3,1) над базовым
     правилом баннера (0,3,0, оно ниже по файлу). */
  html .app[data-viewing-as="1"] .agency-view-banner {
    padding-top: calc(6px + max(env(safe-area-inset-top), 22px));
    padding-bottom: 12px;
  }

  /* Закреплённый период-пикер («календарь») при скролле: в Safari на iPad
     safe-area=0, и он прилипал вплотную к системной шапке. Опускаем чуть ниже —
     держим минимум 16px воздуха сверху. */
  .period-wrap { top: calc(8px + max(env(safe-area-inset-top), 16px)); }
}

/* ============================================================
   DESKTOP (≥ 901px)
   ------------------------------------------------------------
   - Сайдбар 240px фиксированно слева
   - Контент до 1100px по центру
   - Сетка метрик 4 колонки
   - Скрываем нижнюю навигацию и кнопку «назад»
============================================================ */
@media (min-width: 901px) {

  body { background: var(--canvas-parchment); }

  /* Контейнер: grid с сайдбаром */
  .app {
    max-width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
    background: var(--canvas);
  }

  /* На экране входа — без сайдбара, контент центрирован.
     Цвет фона задается в основном правиле выше (графит + перфорация),
     здесь его НЕ переопределяем. */
  .app[data-screen="login"] {
    grid-template-columns: 1fr;
  }
  .app[data-screen="login"] .sidebar { display: none; }
  .app[data-screen="login"] .main { grid-column: 1; }

  /* Сайдбар */
  .sidebar {
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    border-right: 1px solid var(--hairline);
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    grid-column: 1;
  }

  .sb-brand {
    display: flex; align-items: center; gap: 0;
    padding: 4px 12px 22px;
    border-bottom: 1px solid var(--divider-soft);
    margin-bottom: 18px;
  }
  .sb-brand-mark {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--inverse-surface); color: var(--inverse-ink);
    display: flex; align-items: center; justify-content: center;
    font: 700 14px var(--font-display); letter-spacing: -0.4px;
    flex-shrink: 0;
  }
  .sb-brand-mark-img {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
  }
  .sb-brand-text { min-width: 0; }
  .sb-brand-title { font: 600 14px/1.2 var(--font-body); letter-spacing: -0.224px; color: var(--ink); }
  .sb-brand-sub   { font: 400 12px/1.2 var(--font-body); letter-spacing: -0.12px; color: var(--ink-muted-48); margin-top: 2px; }

  /* Длинный лого «Доктор Контекст» в сайдбаре.
     wordmark.svg — темный для светлой темы.
     wordmark-light.svg — светлый для темной темы.
     Переключаем через :root[data-theme]. */
  .sb-brand-wordmark {
    height: 28px; width: auto; display: block;
    max-width: 100%;
  }
  .sb-brand-wordmark--dark  { display: none; }
  :root[data-theme="dark"] .sb-brand-wordmark--light { display: none; }
  :root[data-theme="dark"] .sb-brand-wordmark--dark  { display: block; }
  /* Авто-режим: тема не выбрана явно (нет data-theme), система темная.
     Раньше тут логотип не свапался — отсюда «в Safari на темной не тот лого».
     :not([data-theme="light"]) — чтобы явный выбор «Светлая» при системной
     темной не перебивался. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sb-brand-wordmark--light { display: none; }
    :root:not([data-theme="light"]) .sb-brand-wordmark--dark  { display: block; }
  }

  .sb-nav { display: flex; flex-direction: column; gap: 2px; }
  .sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    color: var(--ink-muted-80);
    transition: background .15s, color .15s, transform .12s;
    font: 400 15px var(--font-body); letter-spacing: -0.224px;
    text-align: left;
    position: relative;
  }
  .sb-item:hover { background: var(--canvas-parchment); color: var(--ink); }
  .sb-item:active { transform: scale(0.98); }
  .sb-item.active {
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: 600;
  }
  .sb-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .sb-lbl { flex: 1; }
  .sb-badge {
    background: var(--status-red); color: #fff;
    font: 600 11px var(--font-body); letter-spacing: -0.12px;
    padding: 2px 7px; border-radius: var(--r-pill);
    min-width: 20px; text-align: center;
  }

  .sb-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--divider-soft); }
  .sb-user {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    transition: background .15s;
    text-align: left;
  }
  .sb-user:hover { background: var(--canvas-parchment); }
  .sb-user-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 600 12px var(--font-body); letter-spacing: -0.12px;
    flex-shrink: 0;
  }
  .sb-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .sb-user-name { font: 600 14px/1.2 var(--font-body); letter-spacing: -0.224px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-user-role { font: 400 12px/1.2 var(--font-body); letter-spacing: -0.12px; color: var(--ink-muted-48); margin-top: 2px; }

  /* Главная область */
  .main {
    display: block;
    grid-column: 2;
    min-width: 0; /* чтобы flex/grid дети могли сжиматься */
    background: var(--canvas-parchment);
  }

  /* Экраны на десктопе занимают всю высоту вьюпорта */
  .screen { min-height: 100vh; }

  /* Topbar на десктопе — шире, без кнопки «Назад» */
  .topbar {
    padding: 18px 28px 20px;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar-title { font-size: 28px; letter-spacing: 0.196px; }
  .topbar-back { display: none; } /* На десктопе навигация через сайдбар */
  .topbar > div[style*="width:36px"] { display: none; }
  /* Скрываем АВАТАРКУ ТОЛЬКО в шапке — большой логотип на странице Профиль остается виден */
  .topbar > .topbar-av { display: none; }

  /* Контент: на всю доступную ширину, минимальные боковые отступы,
     выровненные по заголовку топбара (28px) — дает максимум рабочей зоны
     для широких таблиц (например, Ройстат-разбивка кампаний). */
  .content {
    max-width: none;
    margin: 0;
    width: 100%;
    padding: 24px 28px 32px;
  }
  .content > * + * { margin-top: 32px; }

  /* Метрики — 4 в ряд */
  .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .metric-tile { padding: 20px; }
  .metric-tile-value { font-size: 32px; }

  /* Деньги + Результат бок-о-бок на главной */
  .home-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }
  .home-top > * + * { margin-top: 0; }
  .home-top > * > .pf-card { height: 100%; }
  .home-top .pf-card { padding: 26px; }
  .home-top .pf-value { font-size: 44px; }

  /* Список + быстрый доступ на десктопе шире */
  .list-row { padding: 16px 22px; }

  /* График побольше */
  .spark { height: 120px; }

  /* Нижняя навигация на десктопе — спрятана */
  .bottomnav { display: none; }

  /* Экран входа — широкий фон, форма строго по центру */
  .app[data-screen="login"] .main,
  .app[data-screen="login"] .screen.active {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-wrap {
    /* 372 − 2×22 padding = 328 ровно под ширину OTP (6×48 + 5×8) — кнопка
       «Войти» и поле e-mail совпадают по ширине с рядом ячеек кода. */
    max-width: 372px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 22px;
  }
  .login-hero { margin-bottom: 32px; }

  /* Карточка профиля шире, действия и договор бок-о-бок */
  .profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
  }

  /* Интеграции — не растягиваем на всю ширину десктопа: широкие карточки
     неудобно сканировать глазом, кнопки разъезжаются. Ограничиваем 740px
     (~+15% к 640px, чтобы было где развернуться кнопкам) и центрируем
     рабочую зону по горизонтали. */
  #integrations-list { max-width: 740px; margin: 0 auto; }

  /* Профиль — та же ширина, что и у Интеграций. Узкая карточка + настройки
     в столбик читаются глазами проще, чем растянутый на весь экран лист. */
  .screen[data-screen="profile"] .content { max-width: 740px; margin: 0 auto; }
}

/* ============================================================
   СВОРАЧИВАНИЕ САЙДБАРА В «РЕЛЬСУ» (только десктоп, ≥901px)
   ------------------------------------------------------------
   Состояние хранится классом html.sb-collapsed (ставится inline-скриптом в
   <head> до отрисовки → без мигания) + флаг localStorage 'dk_sidebar'.
   Кнопка-переключатель живёт в шапке сайдбара справа от логотипа; в свёрнутом
   виде логотип прячется, а кнопка центрируется в узкой рельсе (72px).
============================================================ */
@media (min-width: 901px) {
  /* Шапка сайдбара: логотип слева, кнопка сворачивания справа.
     Кнопка оформлена как пункт меню (тот же радиус/цвет/иконка 20px,
     stroke 1.8 в разметке) — чтобы все элементы выглядели единообразно. */
  .sb-brand { justify-content: space-between; gap: 8px; }
  .sb-collapse-btn {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    color: var(--ink-muted-80);
    background: transparent;
    transition: background .15s, color .15s, transform .12s;
  }
  .sb-collapse-btn:hover  { background: var(--canvas-parchment); color: var(--ink); }
  .sb-collapse-btn:active { transform: scale(0.92); }
  .sb-collapse-ico { width: 20px; height: 20px; transition: transform .2s var(--ease-system); }

  /* Плавное изменение ширины колонки сайдбара при сворачивании */
  .app { transition: grid-template-columns .2s var(--ease-system); }

  /* ---------- Свёрнутое состояние ---------- */
  /* Узкая рельса вместо 240px. :not(login) — на экране входа сайдбара нет. */
  html.sb-collapsed .app:not([data-screen="login"]) { grid-template-columns: 72px 1fr; }

  /* Содержимое сайдбара — по центру, без боковых полей */
  html.sb-collapsed .sidebar { padding-left: 0; padding-right: 0; align-items: center; }

  /* Шапка: прячем логотип, кнопка встаёт на его место (по центру рельсы),
     стрелка разворачивается. !important — потому что правила свопа логотипа по
     теме (:root[data-theme] .sb-brand-wordmark--*) специфичнее обычного селектора
     и иначе перебивали скрытие на тёмной теме. */
  html.sb-collapsed .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed .sb-brand-wordmark { display: none !important; }
  /* В рельсе кнопка — ровно как иконка-пункт (44×40, как .sb-item), для единообразия */
  html.sb-collapsed .sb-collapse-btn { width: 44px; height: 40px; }
  html.sb-collapsed .sb-collapse-ico { transform: rotate(180deg); }

  /* Пункты меню — только иконки по центру, подписи скрыты */
  html.sb-collapsed .sb-nav { width: 100%; align-items: center; }
  html.sb-collapsed .sb-item { position: relative; justify-content: center; width: 44px; padding: 10px 0; gap: 0; }
  html.sb-collapsed .sb-lbl { display: none; }
  /* Бейдж-счётчик в рельсе — маленькой точкой в углу иконки (не ломает ширину) */
  html.sb-collapsed .sb-badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 0; width: 8px; height: 8px; padding: 0;
    font-size: 0; line-height: 0; border-radius: 50%;
  }

  /* Футер: прячем имя/роль, оставляем аватар по центру */
  html.sb-collapsed .sb-footer { width: 100%; }
  html.sb-collapsed .sb-user { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed .sb-user-info { display: none; }
}

/* ============================================================
   LARGE DESKTOP (≥ 1280px)
   - Оставляем те же узкие отступы, что и на десктопе — больше места таблицам.
============================================================ */
@media (min-width: 1280px) {
  .content { padding: 24px 28px 32px; }
}

/* ============================================================
   РОЙСТАТ-ТАБЛИЦА КАМПАНИЙ (Реклама → По кампаниям)
   - Sticky первая колонка («Кампания»)
   - Horizontal scroll справа на 15 показателей
   - Поиск/РСЯ — раскрывающиеся корневые строки
============================================================ */
/* Используем общий ритм между блоками раздела (.content > * + *),
   поэтому собственный margin-top не задаем. */

.campaigns-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  /* Тень при скролле — дает визуальную глубину для sticky-колонки */
  background-image:
    linear-gradient(to right, var(--canvas), var(--canvas)),
    linear-gradient(to right, var(--canvas), var(--canvas)),
    linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)),
    linear-gradient(to left,  rgba(0,0,0,0.08), rgba(0,0,0,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: var(--canvas);
  background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.campaigns-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
  background: var(--canvas);
}

/* Заголовок — sticky только по горизонтали (для первой колонки «Кампания»).
   По вертикали не приклеиваем, иначе при скролле страницы заголовки
   налезают на содержимое (строку «Всего»). */
/* Ройстат-стиль заголовков:
   обычный регистр, шрифт побольше, темнее, выровнен слева и сверху.
   Глаз четко делит «лейбл слева → значение справа». */
.campaigns-table thead th {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--divider-soft);    /* тонкая черта между колонками */
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  vertical-align: top;
}
.campaigns-table thead th:last-child { border-right: none; }
/* Кликабельные заголовки-сортировки в «По кампаниям» */
.campaigns-table thead th.ct-sort { cursor: pointer; user-select: none; }
.campaigns-table thead th.ct-sort:hover { color: var(--ink); background: var(--surface-pearl); }
.campaigns-table thead th.ct-sort.is-sorted { color: var(--primary); }
.campaigns-table thead th.ct-sort.is-sorted::after {
  content: ' ↓';
  font-size: 11px;
  font-weight: 700;
}
.campaigns-table thead th.ct-sticky {
  position: sticky; left: 0; z-index: 3;
  text-align: left;
  border-right: 1px solid var(--hairline);
  min-width: 240px;
  max-width: 360px;
}

/* Ячейки — цифры по центру колонки, как в Ройстате */
.campaigns-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--divider-soft);  /* заметный разделитель строк */
  text-align: center;
  vertical-align: middle;
  color: var(--ink);
  white-space: nowrap;
}
.campaigns-table tbody td.ct-sticky {
  position: sticky; left: 0; z-index: 1;
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
  text-align: left;
  font-weight: 500;
  min-width: 240px;
  max-width: 360px;
  white-space: normal;          /* длинные имена кампаний переносятся, не обрезаются */
  word-break: break-word;
  line-height: 1.35;
}
.campaigns-table tbody tr:last-child td { border-bottom: none; }

/* Строка «Всего» — суммарный итог по всей рекламе (Поиск + РСЯ).
   ВАЖНО: фон НЕПРОЗРАЧНЫЙ (canvas + tint слоем), иначе при горизонтальном
   скролле проезжающие справа ячейки видны под sticky-колонкой. */
.campaigns-table tr.total-row td {
  background-image: linear-gradient(var(--primary-tint), var(--primary-tint));
  background-color: var(--canvas);
  font-weight: 700;
}
.campaigns-table tr.total-row td.ct-sticky {
  background-image: linear-gradient(var(--primary-tint), var(--primary-tint));
  background-color: var(--canvas);
  color: var(--primary);
}

/* Группа (Поиск / РСЯ) — корневая раскрывающаяся строка */
.campaigns-table tr.group-row { cursor: pointer; }
.campaigns-table tr.group-row td { background: var(--canvas-parchment); font-weight: 600; }
.campaigns-table tr.group-row td.ct-sticky { background: var(--canvas-parchment); }
.campaigns-table tr.group-row:hover td,
.campaigns-table tr.group-row:hover td.ct-sticky { background: var(--surface-pearl); }

/* Строка «Остальное с рекламы» — нейтральный фон, без курсора и шеврона.
   Лиды без привязки Метрики к конкретной кампании Я.Директа. */
.campaigns-table tr.other-row td { background: var(--canvas-parchment); font-weight: 500; }
.campaigns-table tr.other-row td.ct-sticky {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  font-style: normal;
}

.campaigns-table .chev {
  display: inline-block; width: 12px; height: 12px;
  transform: rotate(-90deg);
  transition: transform 0.18s ease;
  margin-right: 8px;
  color: var(--ink-muted-48);
  vertical-align: -2px;
}
.campaigns-table tr.group-row.expanded .chev { transform: rotate(0deg); }

/* Подгруппа (кампания) */
.campaigns-table tr.child-row { display: none; }
.campaigns-table tr.child-row.visible { display: table-row; }
/* Дочерние кампании визуально вложены под Поиск/РСЯ:
   • отступ слева (показывает иерархию)
   • тонкая вертикальная линия слева — «ствол дерева»
   • чуть тише шрифт, более тонкий вес */
.campaigns-table tr.child-row td.ct-sticky {
  padding-left: 44px;
  font-weight: 400;
  color: var(--ink-muted-80);
  font-size: 12.5px;
  box-shadow: inset 24px 0 0 var(--canvas-parchment),
              inset 26px 0 0 var(--hairline);
}
.campaigns-table tr.child-row td {
  color: var(--ink-muted-80);
  font-size: 12.5px;
}

/* Бэйдж сети */
.net-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
  background: var(--primary-tint);
  color: var(--primary);
  margin-left: 8px;
}
.net-pill.network {
  background: rgba(255,140,0,.12);
  color: #d97400;
}
[data-theme="dark"] .net-pill.network,
:root[data-theme="dark"] .net-pill.network { color: #ffb155; background: rgba(255,177,85,.16); }

/* ДРР подсветка */
.drr-good { color: #0a8c4a; font-weight: 600; }
.drr-mid  { color: var(--ink); }
.drr-bad  { color: #cf2a2a; font-weight: 600; }
:root[data-theme="dark"] .drr-good { color: #34c759; }
:root[data-theme="dark"] .drr-bad  { color: #ff6b6b; }

/* Пустые / неактивные значения */
.campaigns-table td.empty { color: var(--ink-muted-48); }

/* Тип кампании — мелкая подпись под именем */
.campaign-type {
  font-size: 11px;
  color: var(--ink-muted-48);
  font-weight: 400;
  margin-top: 2px;
}

/* Скрытие колонок «Замеры/Цена замера», если intermediateConfigured=false */
.campaigns-table.no-inter .col-inter,
.campaigns-table.no-inter td.col-inter { display: none; }

/* ============================================================
   МОБИЛЬНЫЙ ВЕРТИКАЛЬНЫЙ LAYOUT (≤ 700px)
   Таблица превращается в стек карточек. Принципы:
   • Никаких внутренних рамок и линий-разделителей — только сама карточка
   • Заголовок группы → крупно слева, метрики идут сразу под ним
   • Контраст метка/значение через цвет и вес шрифта (не через линии)
============================================================ */
@media (max-width: 700px) {
  /* Контейнер — прозрачный */
  .campaigns-table-wrap {
    overflow: visible;
    background: transparent !important;
    background-image: none !important;
    border: none;
    padding: 0;
  }
  .campaigns-table,
  .campaigns-table tbody,
  .campaigns-table tr,
  .campaigns-table td {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
  }
  .campaigns-table thead { display: none; }
  .campaigns-table { border-spacing: 0; }

  /* Каждая строка — карточка */
  .campaigns-table tr {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 16px 18px 14px;
    margin: 0 0 12px;
  }

  /* Заголовок карточки (имя группы / кампании / «Остальное»):
     БЕЗ внутренних рамок, БЕЗ нижней линии — простой крупный текст,
     просто над списком метрик с небольшим отступом */
  .campaigns-table td.ct-sticky {
    position: static !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    min-width: 0; max-width: none;
    padding: 0 0 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    text-align: left;
    white-space: normal;
    word-break: break-word;
    letter-spacing: -0.2px;
  }
  .campaigns-table td.ct-sticky::before { content: none !important; }

  /* Метрики — flex-строка «метка слева, значение справа», без линий */
  .campaigns-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    text-align: right;
    font-size: 15px;
    font-weight: 600;            /* значение жирное — основной контент */
    color: var(--ink);
    border: none;
    white-space: normal;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }
  .campaigns-table tbody td::before {
    content: attr(data-label);
    color: var(--ink-muted-48);
    font-size: 14px;
    font-weight: 400;            /* метка легкая, серая */
    text-align: left;
    flex: 0 0 auto;
    margin-right: 14px;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Пустые ячейки скрываем — карточки компактные */
  .campaigns-table td.empty { display: none; }

  /* «Всего» на мобильном скрыта (дублирует плитки выше) */
  .campaigns-table tr.total-row { display: none; }

  /* ВАЖНО: десктопные правила .campaigns-table tr.group-row td и tr.other-row td
     ставят background: canvas-parchment с высокой специфичностью, поэтому
     общее «background: transparent» из базового мобильного правила не работает.
     Явно сбрасываем фон всех td у этих строк, чтобы карточка была единой
     (без «коробки в коробке»). */
  .campaigns-table tr.group-row td,
  .campaigns-table tr.other-row td {
    background: transparent !important;
    background-image: none !important;
  }

  /* Группа Поиск/РСЯ — кликабельная, шеврон слева заголовка */
  .campaigns-table tr.group-row { cursor: pointer; }
  .campaigns-table tr.group-row td.ct-sticky {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 18px;
  }
  .campaigns-table tr.group-row.expanded { padding-bottom: 14px; }

  /* «Остальное с рекламы» — спокойная карточка, без шеврона */
  .campaigns-table tr.other-row td.ct-sticky {
    font-size: 16px;
    color: var(--ink-muted-80);
  }

  /* Дочерняя карточка кампании — визуально вложена под Поиск/РСЯ:
     • ступенька слева (margin-left 14px) — иерархия
     • цветная левая граница 3 px — как «ветвь дерева»
     • меньший радиус скругления слева, чтобы граница «срасталась» с карточкой */
  .campaigns-table tr.child-row {
    display: none;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--primary);
    border-radius: 4px 10px 10px 4px;
    margin: 0 0 8px 14px;
    padding: 14px 16px 12px;
  }
  .campaigns-table tr.child-row.visible { display: block; }
  .campaigns-table tr.child-row td.ct-sticky {
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 8px;
    padding-left: 0;            /* на мобильном tree-полоска не нужна — это уже карточки */
    color: var(--ink);
    box-shadow: none;
  }
  .campaigns-table tr.child-row td { font-size: 14px; padding: 4px 0; }
  .campaigns-table tr.child-row td::before { font-size: 13.5px; }

  /* Шеврон у группы — slim, тонкая обводка */
  .campaigns-table .chev {
    width: 16px; height: 16px;
    margin: 0;
    color: var(--ink-muted-48);
    flex: 0 0 16px;
    stroke-width: 2.2;
  }

  .net-pill { display: none; }
}

/* ============================================================
   АГЕНТСКИЙ КАБИНЕТ
   - Свой набор пунктов сайдбара (Клиенты, Сервисы)
   - Список клиентов в стиле Элама (имя+ID слева, баланс+«Войти» справа)
   - Баннер «Кабинет: X · К списку клиентов» поверх клиентского кабинета,
     когда агентство «вошло как» клиент
============================================================ */

/* --- Сайдбар: переключение наборов nav в зависимости от режима --- */
/* По умолчанию (до загрузки данных) — клиентский набор. После /api/auth/me
   на .app выставляется data-mode="agency" | "client". */
.sb-nav--agency { display: none !important; }
.app[data-mode="agency"] .sb-nav--client { display: none !important; }
.app[data-mode="agency"] .sb-nav--agency { display: flex !important; }

/* --- Баннер «Кабинет: X» — виден только когда agency-юзер вошел как клиент.
       Внутри — переключатель клиентов (Vercel/Stripe-стиль): клик на имени
       раскрывает дропдаун со всеми клиентами + поиск. --- */
.agency-view-banner { display: none; }
.app[data-viewing-as="1"] .agency-view-banner {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-tint);
  /* padding-left = padding-left у .topbar (20px), чтобы стрелка-кнопка
     «Вернуться к аккаунтам» оказалась ровно под заголовком экрана
     («Пульт руководителя» / «Реклама» / …).
     +safe-area сверху: в режиме PWA баннер — самый верхний элемент, поэтому
     именно он должен «опуститься» под челку/островок (а не шапка под ним).
     На ПК env=0 → симметричные 6px/6px, текст по центру. Доп. воздух для
     планшетов (где Safari не отдаёт safe-area) добавляем точечно ниже. */
  padding: calc(6px + env(safe-area-inset-top)) 16px 6px 20px;
  font: 500 13px var(--font-body); letter-spacing: -0.12px;
  border-bottom: 1px solid var(--hairline);
}
/* Когда баннер виден (вошли «как клиент») — он уже держит верхний safe-area,
   поэтому у шапки под ним лишний отступ убираем, иначе двойной разрыв. */
.app[data-viewing-as="1"] .topbar { padding-top: 12px; }

/* Кнопка «← Вернуться к аккаунтам». Стрелка + текст единой кнопкой
   на любом размере экрана. padding-left = 0, чтобы иконка-стрелка стояла
   ровно по левому краю баннера (а баннер уже отступает от края на 20px,
   как .topbar — так получаем выравнивание с заголовком экрана). */
.agency-banner-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  border-radius: var(--r-pill);
  color: var(--primary); cursor: pointer;
  transition: background .15s, transform .12s;
  padding: 4px 12px 4px 0;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.agency-banner-back:hover { background: rgba(0,102,204,.14); }
.agency-banner-back:active { transform: scale(0.97); }
.agency-banner-back-lbl { display: inline; }

/* Мобильный — компактнее (font/padding меньше), но текст остается */
@media (max-width: 700px) {
  .agency-banner-back { padding: 4px 10px 4px 0; font-size: 12px; gap: 4px; }
}

.client-switcher-wrap {
  position: relative;
  display: inline-block;
}
.client-switcher-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 6px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  transition: background .15s;
}
.client-switcher-trigger:hover { background: rgba(0,102,204,.1); }
.client-switcher-trigger[aria-expanded="true"] { background: rgba(0,102,204,.14); }
.client-switcher-label { color: var(--primary); }
.client-switcher-trigger strong { color: var(--ink); font-weight: 600; }
.client-switcher-chevron {
  color: var(--primary);
  transition: transform .18s var(--ease-system);
}
.client-switcher-trigger[aria-expanded="true"] .client-switcher-chevron { transform: rotate(180deg); }

/* Меню под триггером */
.client-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 340px;
  max-width: 90vw;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
  z-index: 100;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Анимация появления */
  opacity: 0; transform: translateY(-4px);
  transition: opacity .15s var(--ease-system), transform .15s var(--ease-system);
  pointer-events: none;
}
.client-switcher-menu[data-open="1"] {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.client-switcher-menu[hidden] { display: none; }

.client-switcher-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-muted-48);
}
.client-switcher-search {
  flex: 1;
  background: transparent;
  border: 0; outline: none;
  /* 16px — иначе iOS Safari зумит поле при тапе */
  font: 400 16px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink);
  padding: 0;
}
.client-switcher-search::placeholder { color: var(--ink-muted-48); }

.client-switcher-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.client-switcher-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent; border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.client-switcher-item:hover { background: var(--canvas-parchment); }
.client-switcher-item-info { flex: 1; min-width: 0; }
.client-switcher-item-name { font: 600 14px var(--font-body); color: var(--ink); }
.client-switcher-item-id { font: 400 11px var(--font-body); color: var(--ink-muted-48); margin-top: 1px; }
.client-switcher-item-current {
  background: var(--primary-tint);
  cursor: default;
}
.client-switcher-item-current:hover { background: var(--primary-tint); }
.client-switcher-item-current .client-switcher-item-name { color: var(--primary); }
.client-switcher-check {
  color: var(--primary); flex-shrink: 0;
  opacity: 0;
}
.client-switcher-item-current .client-switcher-check { opacity: 1; }

.client-switcher-empty {
  padding: 20px;
  text-align: center;
  color: var(--ink-muted-48);
  font: 400 13px var(--font-body);
}

.client-switcher-exit {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0; border-top: 1px solid var(--hairline);
  color: var(--primary); cursor: pointer;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  text-align: left;
  transition: background .12s;
}
.client-switcher-exit:hover { background: var(--canvas-parchment); }

/* На мобильном — меню пинуем к краям viewport через position: fixed.
   Раньше через position: absolute меню анкорилось к .client-switcher-wrap,
   который смещен внутри баннера padding'ом + стрелкой-назад, и при широком
   min-width оно вылезало за правую границу экрана, растягивая страницу. */
@media (max-width: 480px) {
  .client-switcher-menu {
    position: fixed;
    top: 44px;            /* высота баннера: 6 + 28 + 6 + 1px border = 41px, +3 на воздух */
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* --- Топбар агентства: кнопки справа --- */
.agency-topbar-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.agency-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
/* На ПК — иконка-плюс «Добавить клиента» не нужна (виден текст) */
.agency-action-btn-ico-mobile { display: none; }
@media (max-width: 700px) {
  .agency-topbar-actions { gap: 6px; }
  .agency-action-btn { padding: 8px 10px; }
  .agency-action-btn-lbl { display: none; }
  .agency-action-btn-ico-mobile { display: inline-block; }
}
/* Кнопку «Добавить клиента» видит только админ */
.app:not([data-role="admin"]) .agency-action-btn--admin { display: none; }
.app:not([data-role="admin"]) .agency-topbar-actions > [onclick*="openShareAccessModal"] { display: none; }

/* --- Профильный chip справа в шапке агентства (как в Эламе): аватарка + имя + должность.
       Виден только агентским юзерам. Клик ведет в их собственный профиль. */
.agency-profile-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  margin-left: 4px;
}
.agency-profile-chip:hover { background: var(--canvas-parchment); border-color: var(--ink-muted-48); }
.agency-profile-chip:active { transform: scale(0.98); }
.agency-profile-chip-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  flex-shrink: 0;
}
.agency-profile-chip-info {
  display: flex; flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.agency-profile-chip-name {
  font: 600 13px var(--font-body); color: var(--ink);
  letter-spacing: -0.12px;
  white-space: nowrap;
}
.agency-profile-chip-role {
  font: 400 11px var(--font-body); color: var(--ink-muted-48);
  letter-spacing: -0.06px;
  margin-top: 1px;
  white-space: nowrap;
}
/* На мобильном — только аватарка, без подписи */
@media (max-width: 700px) {
  .agency-profile-chip { padding: 4px; border-radius: 50%; }
  .agency-profile-chip-info { display: none; }
}
/* Видна только агентским юзерам */
.agency-profile-chip { display: none; }
.app[data-role="admin"] .agency-profile-chip,
.app[data-role="specialist"] .agency-profile-chip { display: inline-flex; }

/* --- Sidebar footer (нижний-левый профиль) ---
       Прячем в чистом агентском режиме — там роль показывается в chip справа сверху.
       Виден когда: клиент сам залогинился, или агентский юзер «вошел как клиент» (тогда там показывается клиентский профиль). */
.app[data-mode="agency"]:not([data-viewing-as="1"]) .sb-footer { display: none; }

/* --- Поиск --- */
.agency-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 0 14px 0 14px;
  margin-bottom: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.agency-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.agency-search-ico { color: var(--ink-muted-48); flex-shrink: 0; }
.agency-search-input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 12px 10px !important;
  /* 16px — порог, ниже которого iOS Safari авто-зумит инпут при фокусе.
     Держим ровно 16px, чтобы при тапе на поиск с телефона экран не приближался. */
  font: 400 16px var(--font-body); letter-spacing: -0.224px;
  box-shadow: none !important;
}
.agency-search-input:focus { outline: none; box-shadow: none !important; }
.agency-search-clear {
  background: transparent; border: 0; padding: 6px;
  border-radius: 50%;
  color: var(--ink-muted-48); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.agency-search-clear:hover { background: var(--canvas-parchment); color: var(--ink); }

/* --- Список клиентов --- */
.agency-clients-list { display: flex; flex-direction: column; gap: 10px; }

.agency-client-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;   /* якорь для абсолютной кнопки «в архив» */
  /* без hover-эффекта на всю карточку — реагируют только конкретные элементы */
}

/* Ручка перетаскивания клиента (drag-and-drop порядка) */
.agency-client-drag {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 32px;
  margin: -4px -6px -4px -4px;   /* компактно прижата к левому краю */
  background: transparent; border: 0; padding: 0;
  color: var(--ink-muted-48);
  cursor: grab;
  touch-action: none;            /* чтобы тач-перетаскивание не скроллило страницу */
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.agency-client-drag:hover { color: var(--ink); background: var(--canvas-parchment); }
.agency-client-drag:active { cursor: grabbing; }
.agency-client-card.dragging {
  opacity: 0.92;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border-color: var(--primary);
  transform: scale(1.01);
  cursor: grabbing;
}
.agency-clients-list.reordering { cursor: grabbing; }
.agency-clients-list.reordering .agency-client-card:not(.dragging) {
  transition: transform .18s ease;   /* мягкое расступание соседей */
}

.agency-client-enter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink);
  transition: background .15s, border-color .15s, transform .12s;
  flex-shrink: 0;
}
.agency-client-enter:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.agency-client-enter:active { transform: scale(0.97); }
.agency-client-enter svg { color: currentColor; }

.agency-client-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  /* Вертикальный разделитель между кнопкой «Войти» и блоком с именем — как в Эламе */
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}
.agency-client-name {
  font: 600 15px var(--font-body); letter-spacing: -0.224px;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
  word-break: break-word;
}
.agency-client-edit {
  background: transparent; border: 0; padding: 2px;
  border-radius: 4px;
  color: var(--ink-muted-48); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
/* Карандашик появляется ТОЛЬКО при наведении на имя/ID клиента (а не на всю карточку). */
.agency-client-info:hover .agency-client-edit { opacity: 1; }
.agency-client-edit:hover { background: var(--canvas-parchment); color: var(--primary); }
.agency-client-id {
  font: 500 12px var(--font-body); letter-spacing: 0.06px;
  color: var(--ink-muted-48);
  font-variant-numeric: tabular-nums;
}

.agency-client-balance {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
  text-align: right;
}
.agency-client-balance-val {
  font: 600 14px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.agency-client-balance-lbl {
  font: 400 11px var(--font-body); letter-spacing: 0.06px;
  color: var(--ink-muted-48);
  text-transform: lowercase;
}
.agency-client-balance--empty .agency-client-balance-val { color: var(--ink-muted-48); }

/* Только админ видит «карандашик» для редактирования имени */
.app:not([data-role="admin"]) .agency-client-edit { display: none; }

/* Кнопка «в архив» на карточке. Появляется по наведению/нажатию на карточку —
   так же, как «карандаш» переименования (на тач — sticky-hover по тапу).
   Не держим иконку всегда видимой, чтобы не захламлять список на телефоне. */
.agency-client-archive {
  flex-shrink: 0;
  /* Абсолютно к правому краю, ВНЕ потока: иначе скрытая кнопка (30px + gap 18px)
     резервировала ~48px справа и сдвигала баланс влево — он переставал быть
     симметричным левому отступу до ручки перетаскивания. Теперь баланс
     заканчивается ровно на padding-right карточки, как ручка слева. */
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent; border: 0; padding: 0; border-radius: 8px;
  color: var(--ink-muted-48); cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
/* Когда корзина реально появляется (наведение/тап) — чуть поджимаем баланс
   влево, чтобы иконка не наезжала на цифру. В покое баланс выровнен по краю. */
.agency-client-balance { transition: margin-right .15s; }
.agency-client-card:focus-within .agency-client-balance,
.agency-client-info:hover ~ .agency-client-balance { margin-right: 36px; }
@media (hover: hover) {
  .agency-client-card:hover .agency-client-balance { margin-right: 36px; }
}
/* Десктоп (мышь): показываем при наведении на карточку — двойного тапа тут нет. */
@media (hover: hover) {
  .agency-client-card:hover .agency-client-archive { opacity: 1; }
}
/* Тач: по тапу на ИМЯ (info) или фокусе — БЕЗ hover на всей карточке,
   иначе первый тап по «Войти» уходил в hover и кнопка срабатывала со 2-го раза. */
.agency-client-info:hover ~ .agency-client-archive,
.agency-client-card:focus-within .agency-client-archive { opacity: 1; }
.agency-client-archive:hover { background: var(--status-red-tint, var(--canvas-parchment)); color: var(--status-red-on-tint, #c0392b); }

/* Панель переключения «список ↔ архив» */
.agency-archive-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.agency-archive-open, .agency-archive-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font: 600 13px var(--font-body); letter-spacing: -0.12px;
  color: var(--ink); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.agency-archive-open:hover, .agency-archive-back:hover { background: var(--canvas-parchment); border-color: var(--primary); color: var(--primary); }
.agency-archive-open:active, .agency-archive-back:active { transform: scale(0.97); }
.agency-archive-title { font: 600 15px var(--font-body); letter-spacing: -0.2px; color: var(--ink); }

/* Карточка в архиве — приглушенная, с действиями справа */
.agency-client-card--archived { opacity: .9; }
.agency-client-card--archived .agency-client-info { padding-left: 0; border-left: 0; }
.agency-client-arch-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.agency-client-arch-actions .btn { width: auto; flex: 0 0 auto; }

/* Маленькие/опасные кнопки (архив, удаление) */
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-danger {
  background: var(--status-red-on-tint, #c0392b); color: #fff; border: 1px solid transparent;
}
.btn-danger:hover { filter: brightness(0.95); }
.btn-danger:active { transform: scale(0.97); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }

/* Мобильный — кнопка «Войти» становится компактной (только иконка) */
@media (max-width: 480px) {
  .agency-client-card { gap: 10px; padding: 12px 14px; }
  .agency-client-enter { padding: 8px 10px; font-size: 0; gap: 0; }
  .agency-client-enter svg { width: 18px; height: 18px; }
  .agency-client-name { font-size: 14px; }
  .agency-client-balance-val { font-size: 13px; }
  .agency-client-balance-lbl { font-size: 10px; }
}

/* --- Пустые состояния --- */
.agency-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 80px 20px;
  color: var(--ink-muted-48);
  text-align: center;
}
.agency-empty-title {
  font: 600 17px var(--font-body); letter-spacing: -0.374px;
  color: var(--ink);
}
.agency-empty-sub {
  font: 400 14px var(--font-body); letter-spacing: -0.12px;
  max-width: 320px;
}

/* --- На десктопе ограничиваем ширину агентского контента (как профиль/интеграции) --- */
@media (min-width: 901px) {
  .screen[data-screen="agency-clients"] .content,
  .screen[data-screen="agency-services"] .content {
    max-width: 900px; margin: 0 auto;
  }
}

/* --- Bottomnav на агентских экранах — скрываем (мобильный сайдбар не нужен,
       внутри агентства всего 2 пункта и они доступны через сайдбар-меню) --- */
.app[data-screen="agency-clients"] .bottomnav,
.app[data-screen="agency-services"] .bottomnav { display: none !important; }

/* --- Клиент-only пункты профиля (Планы на месяц, Интеграции).
       Видны только когда мы внутри клиентского кабинета — либо клиент
       сам залогинился (data-mode="client" без agency-режима),
       либо агентский юзер «вошел как» клиент (data-viewing-as="1").
       В чистом агентском режиме (свой профиль агентского админа) — прячем. */
.app[data-mode="agency"]:not([data-viewing-as="1"]) .client-only-row { display: none; }

/* --- Личные настройки агентского юзера (тема). Видны только в его собственном
       профиле. Когда он «вошел как» клиент — тема прячется (она остается такой,
       как выставлена у самого агентского юзера, и клиентский профиль ее не меняет). */
.app[data-viewing-as="1"] .personal-only-row { display: none; }

/* --- Модалка «Поделиться доступом» — чекбоксы клиентов --- */
.share-access-clients {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 6px;
  background: var(--canvas);
}
.share-access-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
}
.share-access-row:hover { background: var(--canvas-parchment); }
.share-access-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.share-access-row-info { flex: 1; min-width: 0; }
.share-access-row-name { font: 500 14px var(--font-body); color: var(--ink); }
.share-access-row-id { font: 400 12px var(--font-body); color: var(--ink-muted-48); }

.share-access-toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px;
  font: 400 12px var(--font-body);
}
.share-access-toolbar button {
  background: transparent; border: 0; padding: 4px 8px;
  color: var(--primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  font: inherit;
}

/* Выбор рекламного аккаунта Я.Директа после OAuth */
.dir-acc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dir-acc-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s;
}
.dir-acc-row:hover { background: var(--primary-tint); border-color: var(--primary); }
.dir-acc-info { flex: 1; min-width: 0; }
.dir-acc-name { font: 600 14px var(--font-body); color: var(--ink); }
.dir-acc-login { font: 400 12px var(--font-body); color: var(--ink-muted-48); margin-top: 1px; }
.dir-acc-row svg { color: var(--ink-muted-48); flex-shrink: 0; }
.dir-acc-or { text-align: center; color: var(--ink-muted-48); font: 400 12px var(--font-body); margin: 12px 0 4px; }

/* ============================================================
   PWA STANDALONE — установленное веб-приложение (iPad/iPhone «на экран Домой»)
   ------------------------------------------------------------
   status-bar-style=black-translucent → системная полоса iPad рисуется ПОВЕРХ
   контента, и верхний UI (шапка, баннер «вернуться к аккаунтам», sticky
   период-пикер, верх сайдбара) оказывался под ней. На части устройств
   env(safe-area-inset-top) в standalone отдаёт 0 (или меньше реальной полосы) —
   поэтому держим МИНИМУМ 34px через max(), плюс воздух (+10px). Блок применяется ТОЛЬКО в установленном
   приложении (display-mode: standalone) → обычный браузер и ПК не затрагиваются.
   Размещён последним в файле → перебивает одинаковые по специфичности правила.
============================================================ */
@media (display-mode: standalone) {
  /* высота, на которую опускаем самый верхний UI = системная полоса + воздух */
  .topbar { padding-top: calc(max(env(safe-area-inset-top), 34px) + 10px); }

  /* верх сайдбара (логотип/кнопка-рельса) тоже из-под полосы */
  .sidebar { padding-top: calc(max(env(safe-area-inset-top), 34px) + 10px); }

  /* закреплённый период-пикер при скролле — не под полосу */
  .period-wrap { top: calc(max(env(safe-area-inset-top), 34px) + 10px); }

  /* баннер «вернуться к аккаунтам» — он самый верхний, когда агентство смотрит
     кабинет клиента. html-префикс повышает специфичность над базовым правилом. */
  html .app[data-viewing-as="1"] .agency-view-banner {
    padding-top: calc(max(env(safe-area-inset-top), 34px) + 10px);
    padding-bottom: 12px;
  }
  /* под баннером шапке двойной отступ не нужен — баннер уже держит полосу */
  .app[data-viewing-as="1"] .topbar { padding-top: 14px; }
}