/* ==========================================================================
   Тема ez-business — слой поверх собранного бандла.

   Исходников фронта нет, поэтому оформление задаётся переопределением
   классов бандла. Файл подключается ПОСЛЕ index-*.css в dist/index.html.
   Откат: удалить <link> на этот файл.

   Приоритет берём удвоением класса (.x.x), а не !important — так стили
   остаются предсказуемыми и их можно перебить точечно.
   ========================================================================== */

:root {
  --ez-ink:        #0d0f12;
  --ez-ink-2:      #15181d;
  --ez-lime:       #d6ff17;
  --ez-lime-deep:  #b7dc00;
  --ez-paper:      #ffffff;
  --ez-paper-2:    #f5f7fa;
  --ez-line:       #e4e9f0;
  --ez-line-strong:#cfd7e3;
  --ez-text:       #161b22;
  --ez-muted:      #5c6a7d;
  --ez-focus:      #0f62fe;
  --ez-radius:     14px;
  --ez-radius-lg:  22px;
  --ez-pill:       999px;
  --ez-shadow:     0 24px 60px -20px rgba(13, 15, 18, .28);
  --ez-shadow-soft:0 2px 10px rgba(22, 27, 34, .06);
}

/* ==========================================================================
   1. Экран входа
   ========================================================================== */

/* Фон вместо бледного градиента — фирменный тёмный с лаймовым свечением
   и тонкой сеткой, как на странице /login/. */
.loginCard.loginCard {
  position: relative;
  min-height: 100dvh;
  background: var(--ez-ink);
  padding: 32px 20px;
}

.loginCard.loginCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 620px at 22% 28%, rgba(214, 255, 23, .16) 0%, rgba(214, 255, 23, 0) 66%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px;
  pointer-events: none;
}

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

.loginCard .loginPanel {
  background: var(--ez-paper);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--ez-radius-lg);
  box-shadow: var(--ez-shadow);
  padding: 36px 34px 30px;
  max-width: 440px;
  width: 100%;
}

.loginCard .loginPanelHeader h1 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.022em;
  font-weight: 640;
  color: var(--ez-text);
  margin: 0 0 22px;
}

/* Поля */
.loginCard .loginForm label {
  display: grid;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ez-text);
  margin-bottom: 16px;
}

.loginCard .loginForm input {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ez-text);
  background: var(--ez-paper);
  border: 1px solid var(--ez-line-strong);
  border-radius: var(--ez-radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.loginCard .loginForm input:hover { border-color: #b9c3d2; }

.loginCard .loginForm input:focus {
  outline: none;
  border-color: var(--ez-focus);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, .16);
}

/* Главная кнопка — фирменный лайм с тёмным текстом (контраст 15.6:1) */
.loginCard .loginSubmit.loginSubmit {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--ez-pill);
  background: var(--ez-lime);
  color: #14171a;
  font-size: 15.5px;
  font-weight: 620;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}

.loginCard .loginSubmit.loginSubmit:hover { background: var(--ez-lime-deep); }
.loginCard .loginSubmit.loginSubmit:active { transform: translateY(1px); }

.loginCard .loginSubmit.loginSubmit:focus-visible,
.loginCard .loginForm input:focus-visible {
  outline: 3px solid var(--ez-focus);
  outline-offset: 3px;
}

/* Ссылки: синий заменяем на спокойный тёмный */
.loginCard .loginLinks {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ez-line);
}

.loginCard .textLinkButton.textLinkButton {
  justify-self: start;
  min-height: 32px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ez-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-underline-offset: 3px;
}

.loginCard .textLinkButton.textLinkButton:hover { text-decoration: underline; }

.loginCard .loginBack.loginBack {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0 0;
  font-size: 13px;
  color: var(--ez-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.loginCard .loginBack.loginBack:hover { color: var(--ez-text); }

/* ==========================================================================
   2. Главная
   ========================================================================== */

.siteHeader--dark.siteHeader--dark {
  background: rgba(10, 11, 13, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.siteHeader--dark .brandLogo {
  letter-spacing: -.02em;
}

.siteHeader--dark .navLink {
  border-radius: var(--ez-pill);
  padding: 8px 14px;
  transition: background .16s ease, color .16s ease;
}

.siteHeader--dark .navLink:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

/* Кнопка входа в шапке — заметная, но не спорит с лаймовым CTA */
.siteHeader--dark .loginLink.loginLink {
  border-radius: var(--ez-pill);
  padding: 10px 22px;
  min-height: 42px;
  font-weight: 600;
  background: #fff;
  color: #101215;
  border: 0;
  transition: transform .12s ease, background .16s ease;
}

.siteHeader--dark .loginLink.loginLink:hover { background: #eef1f4; }
.siteHeader--dark .loginLink.loginLink:active { transform: translateY(1px); }

/* Герой: убираем пустоту снизу и добавляем фирменную фактуру */
.homeShowcase.homeShowcase {
  position: relative;
  min-height: 0;
  height: auto;
  padding: 72px 0 96px;
  overflow: hidden;
}

.homeShowcase.homeShowcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 520px at 78% 34%, rgba(214, 255, 23, .10) 0%, rgba(214, 255, 23, 0) 62%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 52px 52px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  pointer-events: none;
  z-index: 0;
}

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

.homeShowcase .eyebrow {
  letter-spacing: .14em;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
}

.homeShowcaseCopy h1 {
  letter-spacing: -.028em;
  line-height: 1.04;
}

.homeShowcaseCopy p {
  color: rgba(255, 255, 255, .66);
  line-height: 1.6;
  max-width: 46ch;
}

/* Кнопки героя */
.homeShowcaseActions a,
.homeShowcaseActions button {
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--ez-pill);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, transform .12s ease, border-color .16s ease;
}

.homeShowcaseActions > :first-child {
  background: var(--ez-lime);
  color: #14171a;
  border: 0;
  box-shadow: 0 10px 30px -12px rgba(214, 255, 23, .6);
}

.homeShowcaseActions > :first-child:hover { background: var(--ez-lime-deep); }

/* Вторая кнопка была почти невидимой: фон rgba(255,255,255,.03) без рамки */
.homeShowcaseActions > :nth-child(2) {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
}

.homeShowcaseActions > :nth-child(2):hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .38);
}

.homeShowcaseActions a:active,
.homeShowcaseActions button:active { transform: translateY(1px); }

.homeShowcaseActions a:focus-visible,
.homeShowcaseActions button:focus-visible {
  outline: 3px solid var(--ez-lime);
  outline-offset: 3px;
}

/* Макет ноутбука и плашки */
.kbLandingLaptop {
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75);
}

.kbLandingPill {
  border-radius: var(--ez-pill);
  backdrop-filter: blur(6px);
}

.kbLandingStatCard {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 900px) {
  .homeShowcase.homeShowcase { padding: 48px 0 64px; }
  .loginCard .loginPanel { padding: 28px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .loginCard *,
  .homeShowcase * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   3. Правки по итогам QA на живом сайте
   ========================================================================== */

/* «Готово» вылезало за плашку: strong в 48px не влезал в карточку 148px */
.kbLandingStatCardBottom strong,
.kbLandingStatCard strong {
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.05;
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Шапка схлопывалась влево на ≤1120px: у .desktopNav снимали flex:1,
   а .headerActions не был прижат вправо */
.headerTop { align-items: center; }

.headerActions.headerActions { margin-left: auto; }

/* Выпадающее меню и бургер были светлыми панелями на тёмной теме */
.dropdownPanel.dropdownPanel,
.mobileMenu.mobileMenu {
  background: #14171c;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8);
}

.dropdownPanel .dropdownTitle,
.mobileMenu .mobileBlockTitle {
  color: rgba(255, 255, 255, .55);
}

.dropdownPanel .dropdownItem,
.mobileMenu .mobileNav a,
.mobileMenu .mobileSectionList a {
  color: rgba(255, 255, 255, .88);
  border-radius: 10px;
}

.dropdownPanel .dropdownItem:hover,
.mobileMenu .mobileNav a:hover,
.mobileMenu .mobileSectionList a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.mobileMenu .mobileLoginButton {
  border-radius: var(--ez-pill);
  background: var(--ez-lime);
  color: #14171a;
  font-weight: 620;
  min-height: 46px;
}

/* Рамка второй кнопки героя давала 1.79:1 — ниже порога 3:1 (WCAG 1.4.11) */
.homeShowcaseActions > :nth-child(2) {
  border-color: rgba(255, 255, 255, .45);
}

.homeShowcaseActions > :nth-child(2):hover {
  border-color: rgba(255, 255, 255, .7);
}

/* Плейсхолдеры в формах SPA не дотягивали до AA (2.56:1) */
.loginCard .loginForm input::placeholder { color: #6b7789; }

/* Рамка полей была почти не видна: 1.45:1 */
.loginCard .loginForm input { border-color: #b3bfd0; }

/* ==========================================================================
   4. Админ-панель
   Все три раздела (аккаунты, заявки, мини-приложения) сидели в сетке на две
   колонки под один элемент; карточка раздувалась до 1321px в контейнере
   1194px и обрезалась справа вместе с кнопкой «Добавить», а min-height 1170px
   оставлял метр пустоты под таблицей.
   ========================================================================== */

/* Раскладка: одна колонка, элемент не шире контейнера */
.adminSplit--single.adminSplit--single {
  grid-template-columns: minmax(0, 1fr);
}

.adminCard.adminCard {
  min-width: 0;
  min-height: 0;
  border-radius: var(--ez-radius-lg);
  border: 1px solid var(--ez-line);
  box-shadow: var(--ez-shadow-soft);
}

/* Отступы: контент не прилипает к сайдбару и к правому краю */
.adminWorkspace.adminWorkspace {
  padding: 24px 28px 48px;
  gap: 20px;
}

.adminHeaderCard.adminHeaderCard {
  border-radius: var(--ez-radius-lg);
  padding: 26px 28px;
}

/* Три метрики в ряд вместо двух с висящей третьей */
.adminMetricGrid.adminMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

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

@media (max-width: 720px) {
  .adminMetricGrid.adminMetricGrid { grid-template-columns: minmax(0, 1fr); }
  .adminWorkspace.adminWorkspace { padding: 16px 16px 40px; }
}

/* Заголовок блока и кнопка «Добавить» — в одну строку, кнопка не за краем */
.adminCardIntro.adminCardIntro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.adminCardIntro .actionButton,
.adminCardIntro button {
  border-radius: var(--ez-pill);
  min-height: 42px;
  padding: 0 20px;
  background: var(--ez-lime);
  color: #14171a;
  border: 0;
  font-weight: 620;
}

.adminCardIntro .actionButton:hover,
.adminCardIntro button:hover { background: var(--ez-lime-deep); }

/* Таблица прокручивается внутри карточки, а не рвёт страницу */
.adminAccountTableWrap.adminAccountTableWrap {
  overflow-x: auto;
  border-radius: var(--ez-radius);
  border: 1px solid var(--ez-line);
}

.adminAccountTable.adminAccountTable { min-width: 100%; }

.adminAccountHeaderRow {
  background: var(--ez-paper-2);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ez-muted);
}

.adminAccountRow { transition: background .12s ease; cursor: pointer; }
.adminAccountRow:hover { background: var(--ez-paper-2); }
.adminAccountRow.active { background: rgba(214, 255, 23, .16); }

/* Поиск в стиле остальных полей */
.adminAccountToolbar .workspaceInput {
  min-height: 46px;
  border-radius: var(--ez-radius);
  border: 1px solid var(--ez-line-strong);
}

.adminAccountToolbar .workspaceInput:focus {
  outline: none;
  border-color: var(--ez-focus);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, .16);
}

/* Сайдбар: имя не обрезалось бы даже длинное */
.sidebarBrand .sidebarBrandMark {
  display: block;
  max-width: 100%;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminSidebarTabButton {
  border-radius: 10px;
  transition: background .12s ease;
}

.adminSidebarTabButton.activeItem {
  background: rgba(214, 255, 23, .22);
  font-weight: 600;
}

/* Модалка редактирования: кнопки в стиле продукта */
.adminModalOverlay .actionButton:not(.secondary):not(.danger) {
  border-radius: var(--ez-pill);
  background: var(--ez-lime);
  color: #14171a;
  border: 0;
  font-weight: 620;
}

/* ==========================================================================
   5. Иконки вместо эмодзи
   Символы эмодзи из бандла вырезаны (scripts/patch-bundle-emoji.py), на их
   место — монохромные SVG через mask-image: масштабируются, красятся в
   currentColor и выглядят одинаково на всех системах.
   ========================================================================== */

.whEmptyIcon,
.whListEmptyIcon,
.whWhCreateFirstIcon,
.whGroupsEdit,
.userChipAvatarEmoji {
  font-size: 0 !important;      /* остаток текста, если что-то не вырезалось */
  line-height: 0;
}

.whEmptyIcon::before,
.whListEmptyIcon::before,
.whWhCreateFirstIcon::before,
.whGroupsEdit::before,
.userChipAvatarEmoji::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--ez-icon) center / contain no-repeat;
  mask: var(--ez-icon) center / contain no-repeat;
}

/* Пустые состояния склада — коробка */
.whEmptyIcon,
.whListEmptyIcon,
.whWhCreateFirstIcon {
  --ez-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z'/><path d='M3.5 7.5 12 12l8.5-4.5M12 12v9'/></svg>");
  color: var(--ez-muted);
}

.whEmptyIcon::before,
.whListEmptyIcon::before,
.whWhCreateFirstIcon::before { width: 44px; height: 44px; }

/* Кнопка редактирования групп — карандаш */
.whGroupsEdit {
  --ez-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17z'/><path d='m13.5 6.5 3 3'/></svg>");
}

.whGroupsEdit::before { width: 18px; height: 18px; }

/* Аватар администратора в шапке — портфель */
.userChipAvatarEmoji {
  --ez-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='2.5'/><path d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3 12h18'/></svg>");
  color: var(--ez-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.userChipAvatarEmoji::before { width: 18px; height: 18px; }

/* Вкладки склада: подписи остаются, пиктограммы больше не нужны */
.whListEmpty p { margin-top: 12px; }

/* ==========================================================================
   6. Старые экраны бандла
   Встроенный вход (.loginShell) и лендинг MAGIC (.appShell) больше не
   используются: загрузчик уводит с них на /login/ и /dashboard. Но между
   сменой состояния приложения и переходом они успевали мелькнуть —
   прячем совсем. Кабинет живёт в .panelShell, его это не касается.
   ========================================================================== */

.loginShell,
.appShell { display: none !important; }

/* ==========================================================================
   7. Мобильные правки по итогам QA (375px)
   ========================================================================== */

/* Финансы → Дашборд: четыре KPI фиксированной сеткой вылезали за экран,
   а контейнер с overflow:hidden не давал докрутить. */
@media (max-width: 760px) {
  .finOpsKpiRow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .financeDashboard,
  .financeDashboard > * { min-width: 0; max-width: 100%; }
  .finOpsKpiCard { padding: 12px 14px; }
}

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

/* Календарь → «Запись на день», любое разрешение. В исходной вёрстке модалка — грид,
   тело занимает строку minmax(0,1fr) с overflow:visible: как только контент выше окна,
   он вылезает из своей строки под футер «К дню / Удалить / Сохранить», и тот
   перекрывает «Информацию о клиенте». Делаем модалку колонкой со своей прокруткой,
   футер — прилипающим к низу (место под него резервируется, ничего не перекрывает),
   а форму на широких экранах раскладываем в две колонки вместо пустой правой половины. */
.calendarModal.calendarModal--session {
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 22px 22px 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.calendarModalBody.calendarModalBody--session {
  display: grid;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
.calendarModalFooter.calendarModalFooter--session {
  position: sticky;
  bottom: 0;
  margin: 12px -22px 0;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--ez-line, #e4e9f0);
  border-radius: 0 0 18px 18px;
  z-index: 3;
}
/* форма одна в двухколоночной боковине — занимает всю ширину и сама делится на две колонки */
.calendarModal--session .calendarBookingSidebar > .calendarBookingSidebarForm:only-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .calendarModal--session .calendarForm--session.calendarBookingSidebarForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
  .calendarModal--session .calendarForm--session.calendarBookingSidebarForm > .calendarBookingField--textarea,
  .calendarModal--session .calendarForm--session.calendarBookingSidebarForm > .calendarBookingMiniActions { grid-column: 1 / -1; }
}

/* Календарь → «Новая запись»: тело модалки имело фиксированную высоту
   и вылезало под футер, который перекрывал кнопки статуса. На телефоне
   модалка — обычная колонка со своей прокруткой, футер прилипает к низу. */
@media (max-width: 640px) {
  .calendarModalLayer { padding: 8px; align-items: stretch; }
  .calendarModal.calendarModal--session {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 16px 14px 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendarModalBody.calendarModalBody--session {
    display: grid;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .calendarModal--session .calendarBookingSidebar { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .calendarBookingFieldGroup { grid-template-columns: minmax(0, 1fr); }
  .calendarModalFooter.calendarModalFooter--session {
    position: sticky;
    bottom: 0;
    margin: 8px -14px 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ez-line, #e4e9f0);
    z-index: 3;
  }
  .calendarModalFooter--session .actionButton { flex: 1 1 auto; }
}

/* Календарь (месяц) на узком экране: 7 колонок с зазором 8px давали
   ячейки по 33px, подписи «Сегодня/Завтра» и «Соседний месяц» резались,
   а кнопки шапки расползались на четыре строки. */
@media (max-width: 520px) {
  .calendarGrid,
  .calendarWeekdays { gap: 3px; }
  .calendarDay { min-height: 56px; padding: 6px 4px; border-radius: 8px; }
  .calendarDay > strong { font-size: .9rem; }
  .calendarDayLabel { display: none; }
  .calendarWeekdays span { font-size: .72rem; }
  .calendarHeader { flex-direction: column; align-items: stretch; }
  .calendarHeaderActions { justify-content: flex-start; gap: 6px; }
  .calendarHeaderActions .miniButton { min-width: 40px; min-height: 40px; }
  .calendarHeaderActions .actionButton { flex: 1 1 calc(50% - 6px); min-height: 40px; }
}

/* Зоны нажатия на телефоне — не меньше 40px. */
@media (max-width: 640px) and (pointer: coarse) {
  .miniButton,
  .whGroupsEdit,
  .profileMenu button,
  .userChip { min-height: 40px; }
  .userChip { padding-top: 3px; padding-bottom: 3px; }
}

/* ==========================================================================
   8. Градиенты
   Единая схема со страницей входа и главной: лаймовые акценты — градиентом
   вместо плоской заливки, тёмные кнопки — как карта на странице входа,
   карточки — с едва заметным светлым градиентом.
   ========================================================================== */

.sidebarGroup.active .sidebarGroupHead {
  background: linear-gradient(135deg, #e0ff4f 0%, #d6ff17 50%, #c3ea12 100%) !important;
  box-shadow: 0 6px 14px rgba(214, 255, 23, .28) !important;
}

.sidebarCalendarDay.selected,
.miniButton.active,
.salePointsTabs .miniButton.active,
.analyticsRangeTabs .miniButton.active,
.miniAppStartButton,
.subscriptionTypeOnlineToggle input:checked {
  background: linear-gradient(135deg, #e0ff4f 0%, #d6ff17 50%, #c3ea12 100%) !important;
}

.actionButton.primary {
  background: linear-gradient(152deg, #33363b 0%, #141618 70%) !important;
  box-shadow: 0 8px 18px rgba(20, 23, 27, .22);
}

.actionButton.primary:hover:not(:disabled) {
  background: linear-gradient(152deg, #3d4046 0%, #1c1e21 70%) !important;
}

.detailCard,
.finOpsKpiCard,
.metricCard,
.whTableCard,
.clientPanelCard,
.calendarCard {
  background-image: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.sidebar {
  background: linear-gradient(180deg, #f5f5f5 0%, #ececec 100%) !important;
}

.sidebarCalendar {
  background-image: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.subscriptionPlanCard.active {
  background-image: linear-gradient(180deg, #ffffff 0%, #f6fde0 100%);
}

.statusChip.on,
.noticePill--accent {
  background: linear-gradient(135deg, rgba(214, 255, 23, .55) 0%, rgba(195, 234, 18, .45) 100%) !important;
}

/* ==========================================================================
   9. Переделки разделов по замечаниям владельца
   ========================================================================== */

/* Тёмные кнопки: текст всегда белый (правило раздела 4 красило его в тёмный) */
.actionButton.primary,
.adminCardIntro .actionButton.primary { color: #fff !important; }

/* --- Приложение → Месседжер: страница Cloudgram в стиле кабинета --- */
.cgWrap { display: grid; gap: 16px; max-width: 1080px; }
.cgHero.cgHero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 32px; align-items: center; padding: 28px 30px; }
.cgBrand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cgBrandMark { width: 40px; height: 40px; border-radius: 12px; flex: none; background-color: #d6ff17; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.2L4 21l1.8-4.6A8 8 0 1 1 21 12z'/><path d='M8.5 12h.01M12 12h.01M15.5 12h.01'/></svg>"), linear-gradient(135deg, #e0ff4f 0%, #d6ff17 50%, #c3ea12 100%); background-size: 22px 22px, 100% 100%; background-position: center, center; background-repeat: no-repeat; }
.cgBrand strong { display: block; font-size: 17px; line-height: 1.2; }
.cgBrand small { display: block; color: #677487; font-size: 12.5px; }
.cgHeroCopy h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.cgHeroCopy p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: #5c6a7d; max-width: 46ch; }
.cgActions { display: flex; gap: 10px; flex-wrap: wrap; }
.cgActions .actionButton { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; }
.cgActions .actionButton.secondary { background: #fff; border: 1px solid #dde4ee; color: #232a35; }
.cgActions .actionButton.secondary:hover { background: #f5f7fa; }
.cgNote { display: block; margin-top: 12px; font-size: 12.5px; color: #8a93a3; }

/* макет окна мессенджера */
.cgWindow { border: 1px solid #e1e7f0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px rgba(24,39,75,.10); font-size: 12px; }
.cgWindowBar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #f1f4f8; border-bottom: 1px solid #e1e7f0; }
.cgWindowBar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd6e0; }
.cgWindowBar span { margin-left: 8px; flex: 1; height: 16px; border-radius: 4px; background: #fff; border: 1px solid #e1e7f0; font-size: 10px; color: #8a93a3; display: flex; align-items: center; padding: 0 6px; }
.cgWindowBody { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 230px; }
.cgList { border-right: 1px solid #edf1f6; padding: 6px; display: grid; align-content: start; gap: 2px; }
.cgListItem { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 6px; border-radius: 8px; }
.cgListItem.active { background: #f5fde0; }
.cgListItem strong { display: block; font-size: 11.5px; line-height: 1.2; }
.cgListItem span { display: block; font-size: 10.5px; color: #8a93a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgAva { width: 26px; height: 26px; border-radius: 50%; background: #e6ebf3; color: #232a35; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cgCh { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; color: #fff; }
.cgCh--tg { background: #2aabee; } .cgCh--vk { background: #0077ff; } .cgCh--wa { background: #25d366; } .cgCh--avito { background: #00aaff; }
.cgThread { display: grid; align-content: start; gap: 6px; padding: 10px; background: #fafbfc; }
.cgThreadHead { font-size: 10.5px; color: #8a93a3; padding-bottom: 6px; border-bottom: 1px solid #edf1f6; margin-bottom: 4px; }
.cgMsg { max-width: 82%; padding: 6px 9px; border-radius: 10px; line-height: 1.35; font-size: 11.5px; }
.cgMsg.in { background: #fff; border: 1px solid #e6ebf3; border-bottom-left-radius: 3px; justify-self: start; }
.cgMsg.out { background: #d6ff17; color: #14171a; border-bottom-right-radius: 3px; justify-self: end; }
.cgInput { margin-top: auto; padding: 7px 10px; border: 1px solid #e1e7f0; border-radius: 8px; background: #fff; color: #9aa1ad; font-size: 11px; }

/* три преимущества и шаги */
.cgGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cgFeature.cgFeature { display: block; padding: 20px; }
.cgFeatureIcon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f1f4f8; margin-bottom: 12px; --ez-icon: none; }
.cgFeatureIcon::before { content: ""; width: 20px; height: 20px; background: #232a35; -webkit-mask: var(--ez-icon) center / contain no-repeat; mask: var(--ez-icon) center / contain no-repeat; }
.cgFeatureIcon--channels { --ez-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='2'/><rect x='14' y='3' width='7' height='7' rx='2'/><rect x='3' y='14' width='7' height='7' rx='2'/><rect x='14' y='14' width='7' height='7' rx='2'/></svg>"); }
.cgFeatureIcon--team { --ez-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.cgFeatureIcon--crm { --ez-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v6H4zM4 14h16v6H4z'/><path d='M8 7h.01M8 17h.01'/></svg>"); }
.cgFeature strong { display: block; font-size: 15.5px; margin-bottom: 6px; }
.cgFeature p { margin: 0; color: #5c6a7d; font-size: 13.5px; line-height: 1.5; }
.cgSteps.cgSteps { display: block; padding: 22px 24px; }
.cgSteps ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cgSteps li { display: flex; gap: 12px; align-items: flex-start; }
.cgSteps li b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(152deg, #33363b 0%, #141618 70%); color: #fff; font-size: 13px; display: grid; place-items: center; }
.cgSteps li strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.cgSteps li span { font-size: 13px; color: #5c6a7d; line-height: 1.45; }
@media (max-width: 1100px) { .cgHero.cgHero { grid-template-columns: 1fr; } .cgWindow { max-width: 520px; } }
@media (max-width: 760px) { .cgGrid, .cgSteps ol { grid-template-columns: 1fr; } .cgHero.cgHero { padding: 22px 18px; } .cgWindowBody { grid-template-columns: 1fr; } .cgList { display: none; } }

/* --- «Новый тип карты»: одна колонка, компактно --- */
.loyaltyTypeModal.loyaltyTypeModal { width: min(520px, calc(100vw - 32px)); }
.loyaltyTypeModalBody.loyaltyTypeModalBody { display: block; padding: 22px 24px; }
.loyaltyTypeModalContent.loyaltyTypeModalContent { max-width: none; }
.loyaltyTypeForm { display: grid; gap: 16px; }
.loyaltyTypePairGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.loyaltyTypeField input { width: 100%; }
.loyaltyTypeHint { margin: 0; padding: 12px 14px; border-radius: 12px; background: #f5f7fa; color: #5c6a7d; font-size: 13.5px; line-height: 1.5; }
.loyaltyTypeModal .clientModalTopMeta { color: #677487; }

/* --- Тариф: описание тарифа — спокойное окно --- */
.setupModal.setupModal:has(.subscriptionPlanModalHero) { width: min(560px, calc(100vw - 32px)); padding: 28px; border-radius: 20px; background: #fff; }
.subscriptionPlanModalHero.subscriptionPlanModalHero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0 0 18px; margin: 0 0 18px; border: 0; border-bottom: 1px solid #e6ebf3; background: none; text-align: left; box-shadow: none; }
.subscriptionPlanModalHero h2 { margin: 8px 0 6px; font-size: 24px; letter-spacing: -.02em; text-align: left; }
.subscriptionPlanModalHero p { margin: 0; color: #677487; font-size: 14.5px; line-height: 1.5; max-width: 40ch; }
.subscriptionPlanModalPrice.subscriptionPlanModalPrice { flex: none; padding: 0; border: 0; background: none; box-shadow: none; text-align: right; }
.subscriptionPlanModalPrice strong { font-size: 28px; letter-spacing: -.02em; }
.subscriptionPlanModalPrice span { display: block; color: #677487; font-size: 13px; }
/* «Стоимость» и «Период» дублируют цену в шапке — остаётся только состояние */
.subscriptionPlanModalStats.subscriptionPlanModalStats { display: block; margin: 0 0 14px; }
.subscriptionPlanModalStat.subscriptionPlanModalStat { display: none; }
.subscriptionPlanModalStat.subscriptionPlanModalStat:last-child { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #f1f4f8; border: 0; box-shadow: none; }
.subscriptionPlanModalStat:last-child span { font-size: 12.5px; color: #677487; }
.subscriptionPlanModalStat:last-child strong { font-size: 13.5px; }
.subscriptionPlanModalFeatures.subscriptionPlanModalFeatures { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.subscriptionPlanModalFeatures li { position: relative; padding-left: 28px; font-size: 15px; }
.subscriptionPlanModalFeatures li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #d6ff17 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 11px no-repeat;
}
.subscriptionPlanModalActions.subscriptionPlanModalActions { display: flex; gap: 10px; justify-content: flex-end; }
.subscriptionPlanModalActions .actionButton { min-height: 44px; padding: 0 20px; border-radius: 999px; }
/* карточки тарифов: без гигантского свечения */
.subscriptionPlanCard.subscriptionPlanCard { background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); }
.subscriptionPlanCard.active.subscriptionPlanCard { background: linear-gradient(180deg, #ffffff 0%, #f7fde0 100%); border-color: #c3ea12; }
.subscriptionPlanCard::before, .subscriptionPlanCard::after { display: none !important; }

/* --- Услуги: категории карточками --- */
.serviceCategoriesCard .detailText { color: #677487; }
.serviceCategoriesList.serviceCategoriesList { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.serviceCategoryRowButton.serviceCategoryRowButton {
  display: block; width: 100%; text-align: left; padding: 18px 18px 16px; border-radius: 16px;
  border: 1px solid #e6ebf3; background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer;
}
.serviceCategoryRowButton.serviceCategoryRowButton:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(24,39,75,.10); border-color: #c3ea12; }
.serviceCategoryRowMain { display: grid; gap: 10px; }
.serviceCategoryRowMain strong { display: block; font-size: 16px; margin-bottom: 4px; }
.serviceCategoryRowMain span { color: #677487; font-size: 13.5px; }
.serviceCategoryRowMain .segmentActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.serviceCategoriesList .emptyState,
.serviceCategoriesList > div:only-child:not(.serviceCategoryRow) { grid-column: 1 / -1; }

/* --- Пользователи и доступы --- */
.adminAccountTableHeader.adminAccountTableHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.accountUsersList .detailItem { padding: 12px 14px; border-radius: 12px; }
.accountUserAccessBlock .tagList { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.accountUserAccessBlock .statusChip { cursor: pointer; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #dde4ee; font-weight: 600; }
.accountUserAccessBlock .statusChip.off { background: #fff; color: #677487; }
.accountUserAccessBlock .statusChip.on { border-color: #c3ea12; }
.pendingInvitationsPanel { display: grid; gap: 12px; margin-bottom: 16px; }
.pendingInvitationCard { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; border: 1px solid #c3ea12; background: linear-gradient(180deg, #ffffff 0%, #f7fde0 100%); }
.pendingInvitationCard > div > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5e7300; margin-bottom: 4px; }
.pendingInvitationCard strong { display: block; font-size: 16px; margin-bottom: 4px; }
.pendingInvitationCard p { margin: 0; color: #5c6a7d; font-size: 13.5px; }
.pendingInvitationActions { display: flex; gap: 8px; }

/* --- Графики: анимация появления и наведения --- */
@keyframes ezDraw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes ezFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ezTip { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.statsAreaChart svg path[stroke]:not([stroke-dasharray]) { stroke-dasharray: 1600; stroke-dashoffset: 0; animation: ezDraw 1.1s cubic-bezier(.22,1,.36,1) both; }
.statsAreaChart svg path[fill^="url"] { animation: ezFade .9s ease .35s both; }
.statsAreaChart svg circle { transition: r .18s ease, stroke-width .18s ease; }
.statsAreaChart svg rect[fill="transparent"] { cursor: crosshair; }
.statsChartTip.statsChartTip { animation: ezTip .16s ease both; padding: 8px 12px; border-radius: 10px; font-size: .84rem; box-shadow: 0 10px 24px rgba(15,23,42,.28); }
.statsChartTip.statsChartTip span { opacity: .75; }
.statsChartEmpty.statsChartEmpty { padding: 40px 16px; }
.statsChartEmpty.statsChartEmpty strong { font-size: 15px; color: #232a35; }
.statsChartEmpty.statsChartEmpty span { color: #8a93a3; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .statsAreaChart svg path[stroke]:not([stroke-dasharray]),
  .statsAreaChart svg path[fill^="url"],
  .statsChartTip.statsChartTip { animation: none; }
}

/* Ссылка «Админ-панель» в меню (добавляет загрузчик только администраторам) */
.ezAdminLink {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  color: #232a35; text-decoration: none; font-weight: 600; font-size: 15px;
  border: 1px dashed #c7cfda;
}
.ezAdminLink svg { width: 22px; height: 22px; color: #677487; }
.ezAdminLink:hover { background: #fff; border-color: #c3ea12; }

/* Услуги внутри карточки категории */
.ezServiceList { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid #edf1f6; display: grid; gap: 6px; }
.ezServiceList li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #232a35; }
.ezServiceList li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezServiceList li b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.ezServiceList--off { color: #9aa1ad !important; text-decoration: line-through; }
.ezServiceEmpty { margin-top: 4px; padding: 10px 0 0; border-top: 1px dashed #e1e7f0; font-size: 13px; color: #8a93a3; }

/* Тариф: крестик не наезжает на цену, статус без лишних отступов, без пустоты снизу */
.setupModal.setupModal:has(.subscriptionPlanModalHero) { min-height: 0; padding-top: 24px; }
.setupModal:has(.subscriptionPlanModalHero) .setupClose { top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: #f1f4f8; }
.subscriptionPlanModalHero.subscriptionPlanModalHero { padding-right: 44px; }
.subscriptionPlanModalStats.subscriptionPlanModalStats { padding: 0; gap: 0; }
.subscriptionPlanModalActions.subscriptionPlanModalActions { margin: 0; padding: 0; }

/* Модалка «Добавить пользователя»: компактнее, поля одной высоты */
.adminModalCard.adminModalCard:has(#dashboard-user-add-title) { width: min(640px, calc(100vw - 32px)); }
.adminModalCard:has(#dashboard-user-add-title) .adminAccountFormGrid { align-items: start; }
.adminModalCard:has(#dashboard-user-add-title) .adminAccountField input { min-height: 44px; }
.adminModalCard:has(#dashboard-user-add-title) .adminSelectedAccountActions { justify-content: flex-end; }
.loyaltyTypeModal .clientModalFooter { justify-content: flex-end; }

/* Админ-панель: карточка аккаунтов растягивалась на +560px за экран (хак бандла) */
.adminWorkspace .adminSplit--single > .adminCard.adminCard { width: 100% !important; margin-right: 0 !important; min-height: auto !important; }
.adminPanelShell .adminWorkspace.adminWorkspace { width: 100% !important; max-width: 100%; }
.adminPanelShell .panelMain { overflow-x: hidden; }
.adminCard .adminMetricGrid.adminMetricGrid { width: 100%; }

/* --- Telegram → конструктор мини-приложения во фрейме --- */
.ezMaPanel.ezMaPanel { padding: 10px 24px 0; display: block; }
.ezMaFrame { display: block; width: 100%; height: calc(100vh - 118px); min-height: 640px; border: 0; background: transparent; }
.ezMaError.ezMaError { display: grid; gap: 8px; justify-items: start; padding: 20px 24px; color: #5c6a7d; }
.ezMaError strong { color: #b42318; }
.ezMaError p { margin: 0; }
.ezMaEmpty { padding: 24px; color: #8a93a3; font-size: 14px; }
.ezMaPanel.ezMaPanelModal { min-height: calc(100vh - 108px); }
.ezMaFrame.ezMaFrameModal { position: fixed; inset: 0; width: 100vw; height: 100vh; min-height: 0; z-index: 3000; }
html.ezMaModal { overflow: hidden; }
/* у панелей после liftIn остаётся transform — он делает position:fixed относительным панели, а не окна */
/* класс ставится при первом открытии раздела и не снимается — иначе liftIn проигрывается заново при закрытии модалки */
html.ezMaHost .panelShell, html.ezMaHost .panelMain, html.ezMaHost .ezMaPanel.ezMaPanel { animation: none !important; transform: none !important; }
/* панель — свой stacking context с z-index 1, ниже шапки (z 3): на время модалки поднимаем его */
html.ezMaModal .panelShell, html.ezMaModal .panelMain, html.ezMaModal .ezMaPanel.ezMaPanel { z-index: 4000 !important; }

@media (max-width: 720px) { .ezMaPanel.ezMaPanel { padding: 8px 12px 0; } .ezMaFrame { height: calc(100vh - 150px); min-height: 520px; } }

/* --- 10. Аналитика: спокойные карточки, компактный график, UTM-ссылки --- */
.analyticsEnhKpiCard.analyticsEnhKpiCard { border-top: 1px solid #e6ebf3; }
.analyticsEnhKpiCard:hover { box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.analyticsEnhKpiLabel { display: inline-flex; align-items: center; gap: 7px; }
.analyticsEnhKpiLabel::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9aa3b2; flex: none; }
.analyticsEnhKpiCard--green .analyticsEnhKpiLabel::before { background: #12813d; }
.analyticsEnhKpiCard--red .analyticsEnhKpiLabel::before { background: #d64b2a; }
.analyticsEnhKpiCard--blue .analyticsEnhKpiLabel::before { background: #1b1f24; }
.analyticsEnhKpiCard--purple .analyticsEnhKpiLabel::before, .analyticsEnhKpiCard--orange .analyticsEnhKpiLabel::before { background: #6b7280; }
/* спарклайны в карточках — в палитре кабинета вместо синего/фиолетового */
.analyticsEnhKpiCard--blue svg path[stroke] { stroke: #1b1f24; }
.analyticsEnhKpiCard--blue svg circle { fill: #1b1f24; }
.analyticsEnhKpiCard--blue svg linearGradient stop { stop-color: #1b1f24; }
.analyticsEnhKpiCard--purple svg path[stroke], .analyticsEnhKpiCard--orange svg path[stroke] { stroke: #6b7280; }
.analyticsEnhKpiCard--purple svg circle, .analyticsEnhKpiCard--orange svg circle { fill: #6b7280; }
.analyticsEnhKpiCard--purple svg linearGradient stop, .analyticsEnhKpiCard--orange svg linearGradient stop { stop-color: #6b7280; }
.analyticsEnhKpiCard--red svg path[stroke] { stroke: #d64b2a; }
.analyticsEnhKpiCard--red svg circle { fill: #d64b2a; }
.analyticsEnhKpiCard--red svg linearGradient stop { stop-color: #d64b2a; }
.analyticsEnhKpiCard--green svg path[stroke] { stroke: #12813d; }
.analyticsEnhKpiCard--green svg circle { fill: #12813d; }
.analyticsEnhKpiCard--green svg linearGradient stop { stop-color: #12813d; }
.statsCardHead h3 { font-size: 16px; }
/* на телефоне широкий viewBox графика аналитики сжимается — даём ему прокрутку, не раздувая страницу */
@media (max-width: 720px) { .analyticsDashboard .statsAreaChart { overflow-x: auto; -webkit-overflow-scrolling: touch; } .analyticsDashboard .statsAreaChart svg { min-width: 860px; } }

.ezUtmCard.ezUtmCard { display: grid; gap: 12px; }
.ezUtmText { margin: 0; color: #5c6a7d; font-size: 13px; line-height: 1.5; max-width: 720px; }
.ezUtmSelect { border: 1px solid #dfe5ee; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; background: #fff; color: #232a35; }
.ezUtmForm { display: flex; gap: 10px; }
.ezUtmForm input { flex: 1; min-width: 0; border: 1px solid #dfe5ee; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14px; color: #232a35; background: #fff; }
.ezUtmForm input:focus { outline: none; border-color: #8fd91a; box-shadow: 0 0 0 3px rgba(143,217,26,.2); }
.ezUtmForm .actionButton { flex: none; }
.ezUtmError { color: #b42318; font-size: 13px; }
.ezUtmEmpty { display: grid; gap: 6px; justify-items: start; padding: 22px 0 6px; color: #5c6a7d; font-size: 14px; }
.ezUtmEmpty strong { color: #232a35; }
.ezUtmEmpty .ezUtmGo { margin-top: 6px; flex: none; }
.ezUtmTableWrap { overflow-x: auto; margin: 0 -4px; }
.ezUtmTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ezUtmTable th { text-align: left; font-weight: 600; color: #8a93a3; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid #edf1f6; white-space: nowrap; }
.ezUtmTable td { padding: 11px 10px; border-bottom: 1px solid #f1f4f8; vertical-align: middle; color: #232a35; }
.ezUtmTable tr:last-child td { border-bottom: 0; }
.ezUtmTable th.num, .ezUtmTable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ezUtmLinkCell { display: flex; align-items: center; gap: 8px; }
.ezUtmLinkCell code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #f3f5f8; border-radius: 6px; padding: 4px 8px; color: #3d4756; white-space: nowrap; }
.ezUtmCopy, .ezUtmRemove { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ezUtmCopy { color: #12813d; }
.ezUtmCopy:hover { background: #eef8e6; }
.ezUtmRemove { color: #8a93a3; }
.ezUtmRemove:hover { color: #b42318; background: #fdeceb; }
.ezUtmDate { color: #8a93a3; white-space: nowrap; }
.ezUtmActions { text-align: right; }
@media (max-width: 720px) { .ezUtmForm { flex-direction: column; } .ezUtmTable td, .ezUtmTable th { padding: 8px 6px; } }

/* --- 11. Касса (Склад → Продажи) --- */
.ezSalesPanel.ezSalesPanel { display: grid; gap: 14px; }
.ezSalesTabs { display: flex; align-items: center; gap: 8px; }
.ezSalesTabs > button { border: 1px solid #dfe5ee; background: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; color: #3d4756; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ezSalesTabs > button.active { background: #1b1f24; border-color: #1b1f24; color: #fff; }
.ezSalesCount { background: rgba(255,255,255,.18); border-radius: 999px; padding: 1px 7px; font-size: 12px; }
.ezSalesTabs > button:not(.active) .ezSalesCount { background: #f3f5f8; }
.ezSalesToday { margin-left: auto; color: #5c6a7d; font-size: 13px; }
.ezSalesToday b { color: #232a35; }
.ezSalesWh { border: 1px solid #dfe5ee; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; background: #fff; }
.ezSalesError { color: #b42318; font-size: 13px; padding: 10px 14px; background: #fdeceb; border-radius: 10px; }
.ezSalesDone { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #eef8e6; border: 1px solid #cfe9bd; border-radius: 12px; font-size: 13px; color: #1f2a22; }
.ezSalesDone strong { display: block; color: #12813d; margin-bottom: 2px; }
.ezSalesDone > div { flex: 1; }
.ezSalesGrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.ezSalesCart.ezSalesCart, .ezSalesSide.ezSalesSide, .ezSalesList.ezSalesList { display: grid; gap: 14px; padding: 18px; animation: none; }
.ezSalesSearch { position: relative; }
.ezSalesSearch input { width: 100%; border: 1px solid #dfe5ee; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; background: #fff; color: #232a35; box-sizing: border-box; }
.ezSalesSearch input:focus { outline: none; border-color: #8fd91a; box-shadow: 0 0 0 3px rgba(143,217,26,.2); }
.ezSalesDrop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid #e6ebf3; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.12); overflow: hidden; }
.ezSalesDrop button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: none; font: inherit; font-size: 14px; color: #232a35; cursor: pointer; text-align: left; }
.ezSalesDrop button:hover { background: #f3f5f8; }
.ezSalesDrop small { color: #8a93a3; white-space: nowrap; }
.ezSalesHint { color: #8a93a3; font-size: 13px; padding: 26px 8px; text-align: center; }
.ezSalesTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ezSalesTable th { text-align: left; font-weight: 600; color: #8a93a3; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid #edf1f6; white-space: nowrap; }
.ezSalesTable td { padding: 10px 8px; border-bottom: 1px solid #f1f4f8; vertical-align: middle; }
.ezSalesTable tr:last-child td { border-bottom: 0; }
.ezSalesTable th.num, .ezSalesTable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ezSalesTable td strong { display: block; font-weight: 600; }
.ezSalesTable td small { color: #8a93a3; font-size: 12px; }
.ezSalesTable tr.short td small { color: #b42318; }
.ezSalesTable tr.cancelled td { color: #a0a8b4; text-decoration: line-through; }
.ezSalesTable tr.cancelled td.ezSalesActions { text-decoration: none; }
.ezSalesQty { display: inline-flex; align-items: center; border: 1px solid #dfe5ee; border-radius: 10px; overflow: hidden; }
.ezSalesQty button { width: 32px; height: 34px; border: 0; background: #f7f8fa; font-size: 18px; cursor: pointer; color: #3d4756; }
.ezSalesQty input { width: 58px; height: 34px; border: 0; text-align: center; font: inherit; font-size: 14px; -moz-appearance: textfield; }
.ezSalesQty input::-webkit-outer-spin-button, .ezSalesQty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ezSalesPrice { width: 96px; border: 1px solid #dfe5ee; border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 14px; text-align: right; }
.ezSalesRemove { border: 0; background: none; color: #8a93a3; font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.ezSalesRemove:hover { color: #b42318; background: #fdeceb; }
.ezSalesField { display: grid; gap: 6px; }
.ezSalesField > label { font-size: 12px; font-weight: 600; color: #8a93a3; }
.ezSalesField input:not([type=number]), .ezSalesField input[type=number] { border: 1px solid #dfe5ee; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; width: 100%; box-sizing: border-box; }
.ezSalesField input:disabled { background: #f7f8fa; color: #a0a8b4; }
.ezSalesRow { grid-template-columns: 1fr 1fr; }
.ezSalesRow > div { display: grid; gap: 6px; align-content: start; }
.ezSalesRow label { font-size: 12px; font-weight: 600; color: #8a93a3; }
.ezSalesClient { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #f7f8fa; border-radius: 12px; }
.ezSalesClient strong { display: block; font-size: 14px; }
.ezSalesClient small { color: #5c6a7d; font-size: 12px; }
.ezSalesNote { color: #8a93a3; font-size: 12px; }
.ezSalesLink { border: 0; background: none; color: #12813d; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; justify-self: start; }
.ezSalesPay { display: flex; gap: 6px; }
.ezSalesPay button { flex: 1; border: 1px solid #dfe5ee; background: #fff; border-radius: 10px; padding: 9px 6px; font: inherit; font-size: 13px; font-weight: 600; color: #3d4756; cursor: pointer; }
.ezSalesPay button.active { background: #eef8e6; border-color: #8fd91a; color: #12813d; }
.ezSalesTotals { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #edf1f6; font-size: 14px; color: #5c6a7d; }
.ezSalesTotals > div { display: flex; justify-content: space-between; }
.ezSalesTotals b { color: #232a35; font-variant-numeric: tabular-nums; }
.ezSalesTotal { font-size: 18px; }
.ezSalesTotal b { font-size: 22px; }
.ezSalesEarn b { color: #12813d; }
.ezSalesSubmit.ezSalesSubmit { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
.ezSalesEmpty { padding: 24px; color: #8a93a3; font-size: 14px; }
.ezSalesEmptyCard.ezSalesEmptyCard { display: grid; gap: 6px; padding: 26px 20px; color: #5c6a7d; font-size: 14px; }
.ezSalesEmptyCard strong { color: #232a35; }
.ezSalesError.detailCard { display: grid; gap: 8px; justify-items: start; }
.ezSalesTableWrap { overflow-x: auto; }
.ezSalesHistory td { font-size: 13px; }
.ezSalesDate { color: #8a93a3; white-space: nowrap; }
.ezSalesItems { color: #5c6a7d; max-width: 360px; }
.ezSalesMuted { color: #a0a8b4; }
.ezSalesActions { text-align: right; }
.ezSalesRemoveText { border: 0; background: none; color: #8a93a3; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ezSalesRemoveText:hover { color: #b42318; background: #fdeceb; }
@media (max-width: 900px) { .ezSalesGrid { grid-template-columns: 1fr; } .ezSalesToday { display: none; } }

/* --- 12. Склад: скрытые поля «для дистрибьюторов» и колонки резерв/ожидание --- */
.whHide.whHide { display: none !important; }
.whStockTable th:nth-child(5), .whStockTable td:nth-child(5), .whStockTable th:nth-child(6), .whStockTable td:nth-child(6) { display: none; }

/* --- 13. Профиль: статус двухфакторной защиты и перепривязка приложения --- */
.ezTfStatus { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid #e3e8e4; border-radius: 12px; background: #f7faf8; }
.ezTfStatusText { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ezTfStatusText strong { font-size: 14px; color: #111117; }
.ezTfStatusText small { font-size: 12.5px; line-height: 1.4; color: #5f6b64; }
.ezTfStatus .setupSecondary { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
@media (max-width: 640px) { .ezTfStatus { flex-direction: column; align-items: stretch; } .ezTfStatus .setupSecondary { width: 100%; } }

/* --- 14. CRM внутри кабинета (Клиенты → CRM): фрейм crm.ez-business.ru --- */
.ezCrmBar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #e3e8e4; border-radius: 12px; background: #f7faf8; font-size: 13.5px; color: #4a5560; }
.ezCrmBar .actionButton { flex: 0 0 auto; white-space: nowrap; }
.ezMaFrame.ezCrmFrame { height: calc(100vh - 172px); min-height: 600px; border: 1px solid #e3e8e4; border-radius: 12px; background: #fff; }
@media (max-width: 720px) { .ezCrmBar { flex-direction: column; align-items: stretch; } .ezMaFrame.ezCrmFrame { height: calc(100vh - 220px); min-height: 480px; } }

/* --- Приложение → CRM: панель-ссылка в CRM (EzCrmLink) --- */
.ezCrmLinkCard.ezCrmLinkCard { max-width: 640px; padding: 26px 28px; display: block; }
.ezCrmLinkBadge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #e0ff4f; color: #1f2630; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ezCrmLinkTitle { margin: 12px 0 8px; font-size: 22px; font-weight: 700; color: #1f2630; }
.ezCrmLinkText { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4a5560; }
.ezCrmLinkList { margin: 14px 0 0; padding: 0 0 0 18px; color: #4a5560; font-size: 13.5px; line-height: 1.6; }
.ezCrmLinkActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ezCrmLinkError { margin: 12px 0 0; color: #b42318; font-size: 13px; }
.ezCrmLinkHint { margin: 16px 0 0; font-size: 12.5px; color: #8a93a3; }
.ezCrmLinkHint a { color: #4a5560; }
@media (max-width: 720px) { .ezCrmLinkCard.ezCrmLinkCard { padding: 20px 18px; } .ezCrmLinkActions .actionButton { flex: 1 1 auto; } }

/* --- 15. Разработчик: подпись ООО «ОРВИО» внизу рабочей области кабинета --- */
.panelMain::after { content: "ez-business — сервис компании ООО «ОРВИО» · © 2026 ООО «ОРВИО»"; display: block; margin-top: auto; padding: 18px 24px 6px; text-align: center; font-size: 12px; color: #8a93a3; }
@media (max-width: 720px) { .panelMain::after { padding: 14px 16px 4px; font-size: 11.5px; } }

/* --- 16. Мобильные и планшетные ширины: таблицы склада, финансовые операции, фильтры лояльности --- */
@media (max-width: 900px) {
  .loyaltyCardsFiltersGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loyaltyCardsControlsRow { grid-template-columns: 1fr; }
  .loyaltyCardsLayout, .loyaltyCardsFilterCard, .loyaltyCardsTableCard { max-width: 100%; min-width: 0; }
  .loyaltyCardsTableCard, .loyaltyTransactionsTableCard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 720px) {
  .whList { padding: 14px 12px; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .whListToolbar { flex-wrap: wrap; row-gap: 8px; }
  .whListTable { min-width: 560px; }
  .finOpsPanel, .finOpsAnalytics { max-width: 100%; min-width: 0; }
  .finOpsActionBtns { justify-self: stretch; flex-wrap: wrap; }
  .finOpsActionBtns .actionButton { flex: 1 1 45%; }
  .finOpsTable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .finOpsHeaderRow, .finOpsRow { min-width: 900px; }
  .finOpsKpiRow { grid-template-columns: 1fr 1fr; gap: 10px; }
  .finOpsChartsRow { grid-template-columns: 1fr; }
  .loyaltyCardsFiltersGrid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .finOpsKpiRow { grid-template-columns: repeat(2, 1fr); }
  .finOpsChartsRow { grid-template-columns: 1fr; }
  .finOpsTable { overflow-x: auto; }
  .finOpsHeaderRow, .finOpsRow { min-width: 900px; }
}

/* --- 17. Пользователи: пояснение о полном доступе сотрудника --- */
.ezAccessNoteText { font-size: 13px; line-height: 1.5; color: #4a5560; padding: 10px 12px; border: 1px solid #e3e8e4; border-radius: 10px; background: #f7faf8; }