/* ================================================================
   CRMka UI — новая дизайн-система (см. design/DESIGN_PLAN.md).
   Только классы с префиксом ui-: старые стили страниц не затрагиваются.
   ================================================================ */

:root {
  --ui-bg: #f1f1f1;
  --ui-surface: #ffffff;
  --ui-surface-hover: #f7f7f7;
  --ui-surface-subdued: #f7f7f7;
  --ui-surface-selected: #ebebeb;
  --ui-border: #e3e3e3;
  --ui-border-strong: #cccccc;
  --ui-divider: #ebebeb;
  --ui-text: #303030;
  --ui-text-strong: #1a1a1a;
  --ui-text-subdued: #616161;
  --ui-text-disabled: #b5b5b5;
  --ui-link: #005bd3;
  --ui-focus: #005bd3;
  --ui-primary: #303030;
  --ui-primary-hover: #1a1a1a;
  --ui-primary-text: #ffffff;
  --ui-critical: #c70a24;
  --ui-critical-hover: #a30a1f;
  --ui-critical-text: #8e0b21;
  --ui-critical-surface: #fee9e8;
  --ui-success-surface: #affebf;
  --ui-success-text: #014b40;
  --ui-attention-surface: #ffef9d;
  --ui-attention-text: #4f4700;
  --ui-info-surface: #e0f0ff;
  --ui-info-text: #00527c;
  --ui-neutral-surface: rgba(0, 0, 0, .06);
  --ui-shadow-card: 0 1px 0 rgba(0, 0, 0, .07), 0 0 0 1px rgba(0, 0, 0, .06);
  --ui-shadow-popover: 0 8px 20px -4px rgba(26, 26, 26, .22), 0 0 0 1px rgba(0, 0, 0, .08);
  --ui-shadow-modal: 0 26px 60px -12px rgba(26, 26, 26, .35), 0 0 0 1px rgba(0, 0, 0, .06);
  --ui-radius-card: 12px;
  --ui-radius-control: 10px;
  --ui-radius-modal: 16px;
  --ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  /* Движение кнопок как у старых .action-btn: плавный подъём и смена цвета. */
  --ui-motion: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  --ui-lift: translateY(-1px) scale(1.02);
  --ui-lift-wide: translateY(-1px) scale(1.01);
  /* Фокус поля и открытый список — нейтральная тёмная рамка; синее кольцо только с клавиатуры. */
  --ui-field-focus: #303030;
  --ui-field-ring: rgba(48, 48, 48, .12);
  /* Лупа в полях поиска выпадающих списков и эмодзи-пикера (цвет --ui-text-subdued). */
  --ui-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.33 12.67a5.33 5.33 0 1 0 0-10.67 5.33 5.33 0 0 0 0 10.67Z'/%3E%3Cpath d='m14 14-2.9-2.9'/%3E%3C/svg%3E");
  --ui-copy-ok-surface: rgba(34, 197, 94, .12);
  --ui-copy-ok-border: rgba(34, 197, 94, .38);
  --ui-copy-ok-text: #15803d;
  --ui-copy-error-surface: rgba(239, 68, 68, .1);
  --ui-copy-error-border: rgba(239, 68, 68, .35);
  --ui-copy-error-text: #dc2626;
}

html.dark-theme {
  --ui-bg: #111214;
  --ui-surface: #1c1d20;
  --ui-surface-hover: #232428;
  --ui-surface-subdued: #18191c;
  --ui-surface-selected: #2a2c31;
  --ui-border: #2c2e33;
  --ui-border-strong: #3a3d44;
  --ui-divider: #26282c;
  --ui-text: #e6e6e6;
  --ui-text-strong: #f5f5f5;
  --ui-text-subdued: #9a9ca3;
  --ui-text-disabled: #5d6068;
  --ui-link: #6aa8ff;
  --ui-focus: #4b9bff;
  --ui-primary: #f1f1f1;
  --ui-primary-hover: #ffffff;
  --ui-primary-text: #111214;
  --ui-critical: #e5484d;
  --ui-critical-hover: #f2555a;
  --ui-critical-text: #ff8a8f;
  --ui-critical-surface: rgba(229, 72, 77, .14);
  --ui-success-surface: rgba(52, 211, 153, .16);
  --ui-success-text: #6ee7b7;
  --ui-attention-surface: rgba(250, 204, 21, .16);
  --ui-attention-text: #fde68a;
  --ui-info-surface: rgba(96, 165, 250, .16);
  --ui-info-text: #93c5fd;
  --ui-neutral-surface: rgba(255, 255, 255, .08);
  --ui-shadow-card: 0 0 0 1px rgba(255, 255, 255, .06);
  --ui-shadow-popover: 0 12px 28px -6px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
  --ui-shadow-modal: 0 30px 70px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  --ui-field-focus: #e6e6e6;
  --ui-field-ring: rgba(255, 255, 255, .12);
  --ui-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a9ca3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.33 12.67a5.33 5.33 0 1 0 0-10.67 5.33 5.33 0 0 0 0 10.67Z'/%3E%3Cpath d='m14 14-2.9-2.9'/%3E%3C/svg%3E");
  --ui-copy-ok-text: #86efac;
  --ui-copy-error-text: #fca5a5;
}

/* --- Текст как в админке Shopify: Inter (main.css), обычное начертание 450 вместо 400,
   сглаживание на macOS. :where() — любое явное правило страницы сильнее. */
:where(body) {
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(input, textarea, select) {
  font-weight: 450;
}

/* --- Скроллбары: нейтральные вместо фиолетовых (main.css задаёт их всем) --- */
:root {
  --ui-scrollbar: rgba(0, 0, 0, .22);
  --ui-scrollbar-hover: rgba(0, 0, 0, .38);
  --ui-btn-edge: rgba(0, 0, 0, .14);
  --ui-btn-edge-bottom: rgba(0, 0, 0, .24);
}

html.dark-theme {
  --ui-scrollbar: rgba(255, 255, 255, .22);
  --ui-scrollbar-hover: rgba(255, 255, 255, .38);
  --ui-btn-edge: rgba(255, 255, 255, .14);
  --ui-btn-edge-bottom: rgba(255, 255, 255, .08);
}

html,
body,
*,
html.dark-theme,
html.dark-theme * {
  scrollbar-color: var(--ui-scrollbar) transparent;
}

*::-webkit-scrollbar-thumb,
html.dark-theme *::-webkit-scrollbar-thumb {
  background-color: var(--ui-scrollbar);
}

*::-webkit-scrollbar-thumb:hover,
html.dark-theme *::-webkit-scrollbar-thumb:hover {
  background-color: var(--ui-scrollbar-hover);
}

/* --- Page ------------------------------------------------------------ */
/* Оболочка трекера даёт свои отступы и фон; страница нового дизайна задаёт их сама. */
.crm-public-main:has(> .ui-page),
.crm-public-main.main-content:has(> .ui-page),
.tt-body .crm-public-main:has(> .ui-page) {
  padding: 0;
  overflow-x: clip;
  background: var(--ui-bg);
}

.ui-page {
  box-sizing: border-box;
  min-height: 100%;
  padding: 16px 20px 24px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 1.45;
}

.ui-page *,
.ui-page *::before,
.ui-page *::after {
  box-sizing: border-box;
}

.ui-page__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.ui-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 16px;
}

.ui-page__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ui-page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-section, #8a8a8a) 16%, var(--ui-surface));
  color: var(--ui-section, #616161);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-section, #8a8a8a) 22%, transparent);
}

.ui-page__icon svg {
  width: 18px;
  height: 18px;
}

/* Оптическое выравнивание несимметричных иконок: сдвиг к центру тяжести рисунка. */
.ui-page__icon--optical svg {
  transform: translate(var(--ui-icon-dx, 0), var(--ui-icon-dy, 0));
}

.ui-page__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.ui-page__subtitle {
  margin: 2px 0 0;
  color: var(--ui-text-subdued);
  font-size: 13px;
}

.ui-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Buttons --------------------------------------------------------- */
.ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  font: 600 13px/1 var(--ui-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: var(--ui-motion);
  transform-origin: center;
}

.ui-btn:not([disabled]):not([aria-disabled="true"]):hover {
  transform: var(--ui-lift);
}

.ui-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Иконки старого дизайна: залитые берут цвет текста, контурные (fill="none") — обводкой. */
.ui-page svg:not([fill="none"]),
.ui-modal svg:not([fill="none"]) {
  fill: currentColor;
}

/* Меню на время открытия живёт в body — правила иконок действуют и там. */
.ui-popover svg:not([fill="none"]) {
  fill: currentColor;
}

/* Контурные иконки рисуются линией одной толщины в пикселях при любом размере
   (14 px в маленьких кнопках, 16 px в обычных, 18 px в заголовках). */
.ui-page svg[fill="none"] *,
.ui-modal svg[fill="none"] *,
.ui-popover svg[fill="none"] * {
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}

.ui-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.ui-btn:not([disabled]):active {
  transform: translateY(0) scale(.98);
}

/* Без внешней тени в покое: тёмная и светлая кнопки рядом читаются одной высоты. */
.ui-btn--primary {
  background: var(--ui-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .55);
  color: var(--ui-primary-text);
}

.ui-btn--primary:hover {
  background: var(--ui-primary-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .18);
  color: var(--ui-primary-text);
}

html.dark-theme .ui-btn--primary {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .4);
}

/* Кромка контрастная (как у Shopify): светлая кнопка на сером фоне не «теряет»
   верхний край при дробном масштабе и читается той же высоты, что и тёмная. */
.ui-btn--secondary {
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-btn-edge), inset 0 -1px 0 var(--ui-btn-edge-bottom);
  color: var(--ui-text);
}

.ui-btn--secondary:hover {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-btn-edge), inset 0 -1px 0 var(--ui-btn-edge-bottom), 0 4px 10px rgba(0, 0, 0, .07);
  color: var(--ui-text-strong);
}

.ui-btn--plain {
  background: transparent;
  color: var(--ui-text);
}

.ui-btn--plain:hover {
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
}

.ui-btn--critical {
  background: var(--ui-critical);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .35);
  color: #fff;
}

.ui-btn--critical:hover {
  background: var(--ui-critical-hover);
  color: #fff;
}

/* Ссылка-переход: текст и шеврон справа; при наведении шеврон чуть уходит вперёд. */
.ui-btn--arrow {
  gap: 2px;
  padding-right: 6px;
}

.ui-btn--arrow .ui-btn__arrow {
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}

.ui-btn--arrow:hover .ui-btn__arrow {
  transform: translateX(2px);
}

.ui-btn--icon {
  width: 32px;
  padding: 0;
}

.ui-btn--sm {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
}

.ui-btn--sm.ui-btn--icon {
  width: 28px;
  padding: 0;
}

.ui-btn[disabled],
.ui-btn[aria-disabled="true"] {
  box-shadow: none;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* --- Card ------------------------------------------------------------ */
.ui-card {
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.ui-card + .ui-card,
.ui-metrics + .ui-card {
  margin-top: 16px;
}

/* --- Card parts ------------------------------------------------------ */
.ui-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.ui-card__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 14px;
  font-weight: 700;
}

.ui-card__section {
  padding: 14px 16px 16px;
}

.ui-card__section + .ui-card__section {
  border-top: 1px solid var(--ui-divider);
}

.ui-card__help {
  margin: 8px 0 0;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.5;
}

.ui-card__tabs {
  padding: 8px;
  border-bottom: 1px solid var(--ui-divider);
}

.ui-card--spaced {
  margin-top: 16px;
}

.ui-card__help--top {
  margin: 0 0 12px;
}

.ui-btn--block {
  width: 100%;
  margin-top: 12px;
}

/* Двойной класс: базовое .ui-empty стоит ниже по файлу и иначе перебивало бы отступы компактного варианта. */
.ui-empty.ui-empty--compact {
  padding: 16px 8px 4px;
}

.ui-empty--compact .ui-empty__text {
  margin-bottom: 0;
}

/* --- Section head над карточкой (как «Business details» у Shopify) ---- */
.ui-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.ui-section-head__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 14px;
  font-weight: 700;
}

/* --- Секции формы внутри карточки ----------------------------------- */
.ui-page .ui-form-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-page .ui-form-section + .ui-form-section {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--ui-divider);
}

.ui-page .ui-form-section__title {
  float: none;
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  color: var(--ui-text-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.ui-page .ui-form-section__help {
  margin: -6px 0 12px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.5;
}

.ui-page .ui-form-section > .form-group:last-child,
.ui-page .ui-form-section > :last-child {
  margin-bottom: 0;
}

/* --- Подзаголовки и строки маршрута в карточке ---------------------- */
.ui-card__subtitle {
  margin: 0 0 8px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  font-weight: 650;
}

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

.ui-card__subhead .ui-card__subtitle {
  margin: 0;
}

.ui-route-rows {
  display: grid;
  gap: 8px;
  margin: 0;
}

.ui-route-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.ui-route-row dt {
  display: flex;
  justify-content: center;
  padding-top: 2px;
  color: var(--ui-text-subdued);
}

.ui-route-row dt svg {
  width: 16px;
  height: 16px;
}

.ui-route-row dd {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}

.ui-route-row a {
  color: var(--ui-text-strong);
  text-decoration: none;
}

.ui-route-row a:hover {
  text-decoration: underline;
}

.ui-route-row .ui-kv__meta {
  font-weight: 500;
}

/* --- Two-column layout ---------------------------------------------- */
.ui-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.ui-layout__aside {
  display: grid;
  gap: 16px;
}

.ui-layout__aside > .ui-card + .ui-card,
.ui-layout__main > .ui-card + .ui-card {
  margin-top: 0;
}

.ui-layout__main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* --- Sticky page header (редакторы) --------------------------------- */
.ui-page__header--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -16px -20px 16px;
  padding: 12px 20px;
  /* Сплошной фон без backdrop-filter: фильтр сделал бы шапку системой координат
     для position: fixed, и меню «⋯» уехало бы от кнопки. */
  background: var(--ui-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ui-page__header--sticky.is-stuck {
  border-bottom-color: var(--ui-border);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .25);
}

.ui-page__back {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .06);
}

.ui-page__back svg {
  width: 14px;
  height: 14px;
  margin-left: -2px;
}

html.dark-theme .ui-page__back {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}

.ui-page__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* --- Copy field ------------------------------------------------------ */
.ui-copy {
  display: flex;
  gap: 8px;
}

.ui-copy__value {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  overflow: hidden;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-strong);
  font: 500 13px/36px var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-copy .ui-btn {
  height: 36px;
}

.ui-kv__meta {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Metrics row ----------------------------------------------------- */
.ui-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.ui-metric {
  padding: 14px 16px;
}

.ui-metric + .ui-metric {
  border-left: 1px solid var(--ui-divider);
}

.ui-metric__label {
  margin: 0 0 6px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  font-weight: 600;
}

.ui-metric__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.02em;
}

.ui-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.ui-trend svg {
  width: 16px;
  height: 16px;
  margin: 0 -2px 0 -3px;
  fill: currentColor;
}

.ui-trend--up { color: #047b5d; }
.ui-trend--down { color: var(--ui-critical-text); }
.ui-trend--flat { color: var(--ui-text-subdued); }

html.dark-theme .ui-trend--up { color: #6ee7b7; }

/* --- Index table ----------------------------------------------------- */
.ui-index__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 8px 8px 8px;
  border-bottom: 1px solid var(--ui-divider);
}

.ui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.ui-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ui-text-subdued);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--ui-motion);
}

.ui-tabs__tab:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
  transform: var(--ui-lift);
}

.ui-tabs__tab[aria-current="page"] {
  background: var(--ui-surface-selected);
  color: var(--ui-text-strong);
}

.ui-tabs__count {
  color: var(--ui-text-subdued);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ui-tabs__tab:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.ui-index__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ui-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ui-search svg {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: var(--ui-text-subdued);
  pointer-events: none;
}

.ui-page .ui-input,
.ui-page .ui-select,
.ui-modal .ui-input,
.ui-modal .ui-select {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  font: 450 13px/1 var(--ui-font); /* как поиск в выпадающих списках и поля Shopify */
  outline: none;
  transition: box-shadow .15s ease;
}

.ui-page .ui-input {
  width: 240px;
  padding: 0 10px 0 28px;
}

.ui-page .ui-select,
.ui-modal .ui-select {
  padding: 0 28px 0 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23616161'%3E%3Cpath d='M4.6 6.2 8 9.6l3.4-3.4.9.9L8 11.4 3.7 7.1z'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 14px;
  cursor: pointer;
}

.ui-page .ui-input::placeholder {
  color: var(--ui-text-subdued);
}

.ui-page .ui-input:focus,
.ui-page .ui-select:focus,
.ui-modal .ui-input:focus,
.ui-modal .ui-select:focus {
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring) !important;
}

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

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ui-table th {
  padding: 8px 12px;
  background: var(--ui-surface-subdued);
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.ui-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--ui-divider);
  color: var(--ui-text);
  vertical-align: middle;
}

.ui-table tbody tr {
  transition: background-color .12s ease;
}

.ui-table tbody tr:hover {
  background: var(--ui-surface-hover);
}

.ui-table .is-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ui-table .is-shrink {
  width: 1%;
  white-space: nowrap;
}

.ui-table .is-subdued {
  color: var(--ui-text-subdued);
}

.ui-table th:first-child,
.ui-table td:first-child {
  padding-left: 16px;
}

.ui-table th:last-child,
.ui-table td:last-child {
  padding-right: 12px;
}

.ui-index__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--ui-divider);
  color: var(--ui-text-subdued);
  font-size: 12.5px;
}

/* Название сущности в строке: ссылка + вторая строка с адресом. */
.ui-entity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ui-entity__name {
  color: var(--ui-text-strong);
  font-weight: 650;
  text-decoration: none;
}

.ui-entity__name:hover {
  color: var(--ui-text-strong);
  text-decoration: underline;
}

.ui-entity__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-text-subdued);
  font-size: 12px;
}

.ui-entity__meta .ui-btn {
  width: 22px;
  height: 22px;
  margin: -3px 0;
  border-radius: 6px;
  opacity: 0;
}

.ui-entity__meta .ui-btn svg {
  width: 14px;
  height: 14px;
}

.ui-table tr:hover .ui-entity__meta .ui-btn,
.ui-entity__meta .ui-btn:focus-visible {
  opacity: 1;
}

.ui-route {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
}

.ui-route span:last-child {
  color: var(--ui-text-subdued);
}

/* --- Badges ---------------------------------------------------------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ui-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}

.ui-badge--success { background: var(--ui-success-surface); color: var(--ui-success-text); }
.ui-badge--attention { background: var(--ui-attention-surface); color: var(--ui-attention-text); }
.ui-badge--critical { background: var(--ui-critical-surface); color: var(--ui-critical-text); }
.ui-badge--info { background: var(--ui-info-surface); color: var(--ui-info-text); }

.ui-badge--plain::before {
  display: none;
}

/* --- Menu (popover) -------------------------------------------------- */
.ui-menu {
  position: relative;
  display: inline-flex;
}

.ui-popover {
  position: absolute;
  overflow-y: auto;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 210px;
  padding: 6px;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top right;
  transition: opacity .14s ease, transform .18s var(--ui-ease);
  text-align: left;
}

.ui-popover[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.ui-popover.is-open {
  opacity: 1;
  transform: none;
}

.ui-popover--up {
  transform-origin: bottom right;
}

.ui-menu__form {
  margin: 0;
}

.ui-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font: 500 13px/1 var(--ui-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-menu__item:hover {
  transform: var(--ui-lift);
}

.ui-menu__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ui-text-subdued);
}

.ui-menu__item:hover,
.ui-menu__item:focus-visible {
  outline: none;
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

/* Недоступное действие (например, «Удалить этап», пока на нём есть лиды): видно, но не
   нажимается и не подсвечивается; причина — в title. */
.ui-menu__item:disabled,
.ui-menu__item:disabled:hover {
  background: transparent;
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.ui-menu__item--critical,
.ui-menu__item--critical svg {
  color: var(--ui-critical-text);
}

.ui-menu__item--critical:hover,
.ui-menu__item--critical:focus-visible {
  background: var(--ui-critical-surface);
  color: var(--ui-critical-text);
}

.ui-menu__sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--ui-divider);
}

/* --- Dropdown (кастомный select: tt-dropdown.js + классы ui-dd) -------- */
/* Префикс html поднимает специфичность до уровня старых правил тёмной темы;
   ui.css подключается последним и выигрывает при равенстве. */
/* overflow: visible — иначе кнопка, чуть увеличиваясь при наведении, обрезается
   по краям старым overflow: hidden обёртки. Меню при открытии всё равно выносится в body. */
html .ui-dd.crm-dropdown {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
}

html .ui-dd.ui-dd--sm.crm-dropdown {
  display: inline-block;
  width: auto;
}

html .ui-dd.crm-dropdown .crm-dd-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  font: 500 13.5px/1.3 var(--ui-font);
  text-align: left;
  cursor: pointer;
  transition: var(--ui-motion);
  transform-origin: center;
}

html .ui-dd.ui-dd--sm.crm-dropdown .crm-dd-btn {
  min-height: 28px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
}

html .ui-dd.crm-dropdown .crm-dd-btn:not(:disabled):hover {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong), 0 4px 10px rgba(0, 0, 0, .07);
  transform: var(--ui-lift-wide);
}

html .ui-dd.ui-dd--sm.crm-dropdown .crm-dd-btn:not(:disabled):hover {
  transform: var(--ui-lift);
}

html .ui-dd.crm-dropdown.open .crm-dd-btn {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
  transform: none;
}

html .ui-dd.crm-dropdown .crm-dd-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

html .ui-dd.crm-dropdown .crm-dd-btn[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--ui-critical);
}

html .ui-dd.crm-dropdown .crm-dd-btn:disabled {
  background: var(--ui-neutral-surface);
  color: var(--ui-text-disabled);
  cursor: not-allowed;
}

html .ui-dd.crm-dropdown .crm-dd-btn::after {
  right: 10px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23616161'%3E%3Cpath d='M4.6 6.2 8 9.6l3.4-3.4.9.9L8 11.4 3.7 7.1z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  transition: transform .18s var(--ui-ease);
}

html .ui-dd.crm-dropdown.open .crm-dd-btn::after {
  transform: translateY(-50%) rotate(180deg);
}

html .ui-dd.crm-dropdown .dropdown-label {
  color: var(--ui-text-subdued);
  font-weight: 500;
}

html .ui-dd.crm-dropdown .crm-dd-label {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ширину и положение (с учётом края экрана) задаёт tt-dropdown.js — без min-width. */
html .crm-dd-menu.ui-dd-menu {
  box-sizing: border-box;
  max-height: 320px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  color: var(--ui-text);
  font-family: var(--ui-font);
}

html .ui-dd-menu .crm-dd-search {
  width: 100%;
  height: 32px;
  margin: 0 0 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text);
  font: 500 13px/1 var(--ui-font);
}

html .ui-dd-menu .crm-dd-search:focus {
  border: 0 !important;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ui-field-focus) !important;
}

html .ui-dd-menu .crm-dd-option {
  position: relative;
  padding: 8px 30px 8px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

html .ui-dd-menu .crm-dd-option:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

html .ui-dd-menu .crm-dd-option.selected {
  background: var(--ui-surface-selected);
  color: var(--ui-text-strong);
  font-weight: 650;
}

html .ui-dd-menu .crm-dd-option.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html .ui-dd-menu .crm-dd-empty {
  padding: 10px;
  color: var(--ui-text-subdued);
  font-size: 13px;
}

/* --- Copy feedback: единый успех для всех кнопок копирования ---------- */
html .tt-copy-btn.tt-copy-btn--done,
html .ui-btn.tt-copy-btn--done,
html .ui-page .tt-page .action-btn.tt-copy-btn--done,
html .ui-btn[data-tt-copy-value].tt-copy-btn--done {
  background: var(--ui-copy-ok-surface);
  box-shadow: inset 0 0 0 1px var(--ui-copy-ok-border);
  color: var(--ui-copy-ok-text);
}

html .tt-copy-btn.tt-copy-btn--error,
html .ui-btn.tt-copy-btn--error,
html .ui-page .tt-page .action-btn.tt-copy-btn--error,
html .ui-btn[data-tt-copy-value].tt-copy-btn--error {
  background: var(--ui-copy-error-surface);
  box-shadow: inset 0 0 0 1px var(--ui-copy-error-border);
  color: var(--ui-copy-error-text);
}

/* Слот иконки копирования: размер по кнопке, обе иконки (исходная и галочка)
   заполняют слот целиком — галочка всегда по центру. Размер слота JS пишет
   инлайн, поэтому !important. */
.ui-page .crm-copy-icon {
  width: 16px !important;
  height: 16px !important;
}

.ui-page .ui-btn--sm .crm-copy-icon,
.ui-page .ui-entity__meta .crm-copy-icon,
.ui-page .tt-page .action-btn.small .crm-copy-icon {
  width: 14px !important;
  height: 14px !important;
}

.ui-page .ui-btn .crm-copy-icon > svg,
.ui-page .ui-entity__meta .ui-btn .crm-copy-icon > svg,
.ui-page .tt-page .action-btn .crm-copy-icon > svg {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* --- Modal ----------------------------------------------------------- */
.ui-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--ui-radius-modal);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 13.5px;
  line-height: 1.5;
}

.ui-modal::backdrop {
  background: rgba(0, 0, 0, .48);
}

.ui-modal[open] {
  animation: ui-modal-in .22s var(--ui-ease);
}

.ui-modal[open]::backdrop {
  animation: ui-fade-in .2s ease;
}

@keyframes ui-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ui-modal__form {
  margin: 0;
}

.ui-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 4px 20px;
}

.ui-modal__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 15px;
  font-weight: 700;
}

.ui-modal__body {
  padding: 12px 20px 4px;
}

.ui-modal__body p {
  margin: 0 0 10px;
}

.ui-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
}

/* --- Banner ---------------------------------------------------------- */
.ui-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ui-info-surface);
  color: var(--ui-text);
}

.ui-banner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ui-info-text);
}

.ui-banner--critical {
  background: var(--ui-critical-surface);
}

.ui-banner--critical svg {
  color: var(--ui-critical);
}

.ui-banner p {
  margin: 0;
}

/* --- Empty state ----------------------------------------------------- */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 16px 48px;
  text-align: center;
}

.ui-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-subdued);
}

.ui-empty__icon svg {
  width: 20px;
  height: 20px;
}

/* Стикер вместо значка — там, где в разделе ещё ничего нет (docs/STICKERS_PLAN_20261102.md).
   «Ничего не нашлось» — маленький общий стикер с лупой. Один мягкий «поп» при появлении. */
.ui-empty .ui-empty__sticker {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
}
.ui-empty .ui-empty__sticker--small { width: 88px; height: 88px; }
.ui-empty--compact .ui-empty__sticker { width: 88px; height: 88px; }
/* Компактный вариант рассчитан на маленький значок: со стикером снизу нужен воздух, иначе текст упирается в край карточки. */
.ui-empty.ui-empty--compact:has(.ui-empty__sticker) { padding: 8px 8px 28px; }
@media (max-width: 640px) {
  .ui-empty .ui-empty__sticker { width: 96px; height: 96px; }
  .ui-empty .ui-empty__sticker--small { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ui-sticker { animation: ui-sticker-pop .45s cubic-bezier(.2, .9, .3, 1.25) both; }
}
/* Экран «модуль не в тарифе»: открытый замок вместо значка модуля (стили экрана — billing.css). */
.bl-locked .bl-locked__sticker { display: block; width: 140px; height: 140px; margin: -8px auto 10px; }
@keyframes ui-sticker-pop {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: none; }
}

.ui-empty__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 15px;
  font-weight: 700;
}

.ui-empty__text {
  max-width: 44ch;
  margin: 0 0 10px;
  color: var(--ui-text-subdued);
}

/* ====================================================================
   Люди, роли и права: аватары, чипы, карточки выбора, матрица прав.
   ==================================================================== */
.ui-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ui-avatar, #6b7280);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ui-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

/* Аватары рядом, без нахлёста: инициалы не перекрываются. */
.ui-avatars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ui-avatars__more {
  margin-left: 6px;
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 600;
}

.ui-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ui-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-person__name {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-person__meta {
  overflow: hidden;
  color: var(--ui-text-subdued);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ui-chip--strong {
  background: var(--ui-primary);
  color: var(--ui-primary-text);
}

.ui-chip--muted {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-subdued);
}

/* Карточки выбора (радио и чекбоксы): кликабельна вся карточка. */
.ui-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.ui-choice {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-choice:hover {
  background: var(--ui-surface-hover);
  transform: var(--ui-lift-wide);
}

.ui-choice:has(input:checked) {
  box-shadow: inset 0 0 0 1.5px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
}

.ui-choice input {
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--ui-primary);
}

/* Радио в карточке выбора — одно на всё приложение (как в выпадающих списках): общие
   стили полей трекера и старых страниц не раздувают его до высоты инпута. */
body:not(#_) .ui-choice input[type="radio"] {
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong);
  cursor: pointer;
  transition: box-shadow .15s ease;
}

body:not(#_) .ui-choice input[type="radio"]:checked {
  box-shadow: inset 0 0 0 5px var(--ui-text-strong);
}

body:not(#_) .ui-choice input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.ui-choice__title {
  display: block;
  color: var(--ui-text-strong);
  font-weight: 650;
}

.ui-choice__text {
  display: block;
  margin-top: 1px;
  color: var(--ui-text-subdued);
  font-size: 12px;
  line-height: 1.4;
}

/* Матрица прав: раздел × уровень. Колонки выровнены, чтобы таблица читалась
   сверху вниз; строка группы выставляет уровень всем разделам сразу. */
.ui-perm {
  --ui-perm-cols: minmax(180px, 1fr) repeat(4, minmax(92px, 116px));
  font-size: 13px;
}

.ui-perm__head,
.ui-perm__row {
  display: grid;
  grid-template-columns: var(--ui-perm-cols);
  align-items: center;
}

.ui-perm__head {
  position: sticky;
  top: var(--ui-sticky-offset, 64px);
  z-index: 5;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 650;
}

.ui-perm__head > span {
  padding: 10px 0;
  text-align: center;
}

.ui-perm__head > span:first-child {
  text-align: left;
}

.ui-perm__row {
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-border);
  transition: background-color .15s ease;
}

.ui-perm__row:hover {
  background: var(--ui-surface-hover);
}

.ui-perm__label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ui-text);
  font-weight: 550;
}

.ui-perm__label svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ui-text-subdued);
  fill: currentColor;
}

.ui-perm__group {
  min-height: 46px;
  background: var(--ui-bg);
}

.ui-perm__group .ui-perm__label {
  color: var(--ui-text-strong);
  font-weight: 700;
}

.ui-perm__mixed {
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 550;
}

.ui-perm__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  cursor: pointer;
}

.ui-perm__cell--off {
  color: var(--ui-text-disabled, #b5b5b5);
  cursor: default;
}

.ui-perm__cell input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Радио: кружок с толстой обводкой при выборе. «Удаление» выбранным — красное. */
.ui-perm__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong);
  transition: box-shadow .15s ease, transform .15s ease;
}

.ui-perm__cell:hover .ui-perm__dot {
  box-shadow: inset 0 0 0 1.5px var(--ui-text-subdued);
  transform: scale(1.12);
}

.ui-perm__cell input:checked + .ui-perm__dot {
  box-shadow: inset 0 0 0 5.5px var(--ui-primary);
}

.ui-perm__cell[data-level="0"] input:checked + .ui-perm__dot {
  box-shadow: inset 0 0 0 5.5px var(--ui-border-strong);
}

.ui-perm__cell[data-level="3"] input:checked + .ui-perm__dot {
  box-shadow: inset 0 0 0 5.5px var(--ui-critical);
}

.ui-perm__cell input:focus-visible + .ui-perm__dot {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-perm--locked .ui-perm__cell {
  cursor: default;
  opacity: .55;
}

.ui-perm--locked .ui-perm__cell:hover .ui-perm__dot {
  transform: none;
}

/* Поле формы нового дизайна: подпись, поле во всю ширину, подсказка. */
.ui-field {
  display: grid;
  gap: 6px;
}

.ui-field + .ui-field {
  margin-top: 14px;
}

.ui-field__label {
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.ui-field__help {
  margin: 0;
  color: var(--ui-text-subdued);
  font-size: 12px;
  line-height: 1.45;
}

.ui-page .ui-field .ui-input,
.ui-modal .ui-field .ui-input,
.ui-page .ui-field .ui-select,
.ui-modal .ui-field .ui-select {
  width: 100%;
  height: 36px;
  border-radius: var(--ui-radius-control);
  font-size: 13.5px;
}

.ui-page .ui-field .ui-input,
.ui-modal .ui-field .ui-input {
  padding: 0 12px;
}

/* Многострочное поле: отступ сверху и снизу, как у текста в полях Shopify (без него текст
   прилипает к верхней границе), высота — по содержимому. */
:is(.ui-page, .ui-modal) .ui-field textarea.ui-input {
  height: auto;
  padding: 8px 12px;
  line-height: 1.45;
}

.ui-banner--attention {
  background: var(--ui-attention-surface);
}

.ui-banner--attention svg {
  color: var(--ui-attention-text);
}

.ui-banner__action {
  margin-left: auto;
  flex: none;
}

/* Большая модалка: шапка и подвал на месте, прокручивается только тело. */
.ui-modal--lg {
  width: min(780px, calc(100vw - 32px));
  overflow: hidden;
}

.ui-modal--lg .ui-modal__form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
}

.ui-modal--lg .ui-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 16px;
  overflow-y: auto;
}

.ui-modal--lg .ui-modal__footer {
  border-top: 1px solid var(--ui-divider);
}

/* Окно в две колонки: слева выбор, справа его итог — видно сразу, без прокрутки. */
.ui-modal--xl {
  width: min(1060px, calc(100vw - 32px));
}

.ui-modal__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ui-modal__aside {
  position: sticky;
  top: 0;
  padding: 14px 16px;
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg);
}

.ui-choices--list {
  grid-template-columns: 1fr;
  gap: 6px;
}

.ui-choices--list .ui-choice {
  padding: 8px 12px;
}

@media (max-width: 860px) {
  .ui-modal__split {
    grid-template-columns: 1fr;
  }

  .ui-modal__aside {
    position: static;
  }
}

.ui-modal__section + .ui-modal__section {
  margin-top: 18px;
}

.ui-modal__section-title {
  margin: 0 0 8px;
  color: var(--ui-text-strong);
  font-size: 13.5px;
  font-weight: 700;
}

.ui-table--compact th,
.ui-table--compact td {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Итог роли словами. */
.ui-summary {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ui-summary__row dt {
  margin-bottom: 2px;
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 650;
}

.ui-summary__row dd {
  margin: 0;
  color: var(--ui-text);
  line-height: 1.45;
}

.ui-summary__row--critical dd {
  color: var(--ui-critical-text);
}

.ui-tree__indent {
  display: inline-block;
  flex: none;
  width: calc(var(--depth, 0) * 22px);
}

.ui-tree__branch {
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-bottom: 1.5px solid var(--ui-border-strong);
  border-left: 1.5px solid var(--ui-border-strong);
  border-bottom-left-radius: 4px;
  transform: translateY(-4px);
}

@media (max-width: 760px) {
  .ui-perm {
    --ui-perm-cols: minmax(120px, 1fr) repeat(4, 48px);
  }

  .ui-perm__head > span:not(:first-child) {
    font-size: 0;
  }

  .ui-perm__head > span:not(:first-child)::after {
    content: attr(data-short);
    font-size: 11px;
  }
}

/* ====================================================================
   Уведомления (ui-toast): короткий итог действия внизу по центру.
   Снизу они не закрывают кнопки липкой шапки («Сохранить», «⋯»), в которые
   только что кликнули. Иконки — старые круглые значки уведомлений CRMka.
   ==================================================================== */
:root {
  --ui-toast-bg: #1a1a1a;
  --ui-toast-text: #ffffff;
  --ui-toast-subdued: rgba(255, 255, 255, .72);
  --ui-toast-close-hover: rgba(255, 255, 255, .14);
  --ui-toast-critical-bg: #c70a24;
  --ui-toast-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

/* Тёмная тема: тост светлый, как главная кнопка в тёмной теме. */
html.dark-theme {
  --ui-toast-bg: #f1f1f1;
  --ui-toast-text: #1a1a1a;
  --ui-toast-subdued: rgba(26, 26, 26, .68);
  --ui-toast-close-hover: rgba(0, 0, 0, .08);
  --ui-toast-critical-bg: #c4282f;
  --ui-toast-shadow: 0 14px 36px -8px rgba(0, 0, 0, .7);
}

.ui-toasts {
  position: fixed;
  inset: auto auto var(--ui-toast-offset, 20px) 50%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, calc(100vw - 24px));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

/* В чате тосты поднимаются над полем ввода, чтобы не закрывать его. */
body:has(.chat-input) .ui-toasts {
  --ui-toast-offset: 104px;
}

/* Слот схлопывается по высоте при закрытии: соседи съезжают плавно, без прыжка. */
.ui-toast-slot {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  transition: grid-template-rows .24s var(--ui-ease);
}

.ui-toast-slot.is-leaving {
  grid-template-rows: 0fr;
}

.ui-toast-slot__inner {
  display: flex;
  justify-content: center;
  min-height: 0;
  padding-top: 8px;
}

.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 8px 12px 12px;
  border-radius: 12px;
  background: var(--ui-toast-bg);
  box-shadow: var(--ui-toast-shadow);
  color: var(--ui-toast-text);
  /* Строка текста ровно по высоте иконки (20 px): однострочный тост выровнен по
     центру, а в многострочном иконка стоит напротив первой строки. */
  font: 550 13px/20px var(--ui-font);
  pointer-events: auto;
  animation: ui-toast-in .28s var(--ui-ease) both;
  transition: opacity .2s ease, transform .2s ease;
}

.ui-toast-slot.is-leaving .ui-toast {
  opacity: 0;
  transform: translateY(6px) scale(.98);
}

.ui-toast.is-bumped {
  animation: ui-toast-bump .32s var(--ui-ease);
}

.ui-toast--error {
  --ui-toast-text: #ffffff;
  --ui-toast-subdued: rgba(255, 255, 255, .82);
  --ui-toast-close-hover: rgba(255, 255, 255, .18);
  background: var(--ui-toast-critical-bg);
}

.ui-toast__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.ui-toast__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-toast__icon circle { fill: var(--ui-toast-icon-bg, #3498db); }
.ui-toast__icon path { stroke: var(--ui-toast-icon-mark, #ffffff); }
.ui-toast--success { --ui-toast-icon-bg: #2ed573; }
.ui-toast--warning { --ui-toast-icon-bg: #f5b425; --ui-toast-icon-mark: #3d2c00; }
/* На красном тосте значок инвертируется: белый круг, красный крестик. */
.ui-toast--error { --ui-toast-icon-bg: #ffffff; --ui-toast-icon-mark: var(--ui-toast-critical-bg); }

.ui-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 2px;
  overflow-wrap: anywhere;
}

.ui-toast__title {
  font-weight: 700;
}

.ui-toast__title + .ui-toast__message {
  color: var(--ui-toast-subdued);
}

.ui-toast__message:empty {
  display: none;
}

.ui-toast__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -2px 0 -2px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-toast-subdued);
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-toast__close:hover {
  background: var(--ui-toast-close-hover);
  color: var(--ui-toast-text);
  transform: scale(1.08);
}

.ui-toast__close:focus {
  outline: none;
}

.ui-toast__close:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.ui-toast__close svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

@keyframes ui-toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.96);
  }
}

@keyframes ui-toast-bump {
  40% {
    transform: scale(1.03);
  }
}

@media (max-width: 640px) {
  .ui-toasts {
    --ui-toast-offset: 12px;
  }

  .ui-toast {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast,
  .ui-toast.is-bumped {
    animation: none;
  }

  .ui-toast-slot,
  .ui-toast-slot.is-leaving .ui-toast {
    transition: none;
    transform: none;
  }
}

/* ====================================================================
   Переходный адаптер: старые элементы трекера внутри новых страниц.
   Классы и data-атрибуты, на которых держится JS, не меняются — меняется
   только вид. Удаляется, когда страница полностью переходит на ui-*.
   ==================================================================== */
.ui-page .tt-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}

.ui-page .tt-page .form-group > label,
.ui-page .tt-page .tt-field > label,
.ui-page .tt-page .form-group > .ui-field__label-row > label,
.ui-page .tt-page .tt-field > .ui-field__label-row > label {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 600;
}

.ui-page .tt-page .form-group input:not([type="checkbox"]):not([type="radio"]),
.ui-page .tt-page .form-group select,
.ui-page .tt-page .form-group textarea,
.ui-page .tt-page .tt-input,
.ui-page .tt-page .tt-textarea,
.ui-page .tt-page .tt-token-input,
.ui-page .tt-page .form-control {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-text);
  font: 500 13.5px/1.35 var(--ui-font);
}

.ui-page .tt-page textarea.form-control,
.ui-page .tt-page .form-group textarea,
.ui-page .tt-page .tt-textarea {
  min-height: 84px;
  resize: vertical;
}

.ui-page .tt-page .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.ui-page .tt-page .form-group textarea:focus,
.ui-page .tt-page .tt-input:focus,
.ui-page .tt-page .tt-textarea:focus,
.ui-page .tt-page .tt-token-input:focus,
.ui-page .tt-page .form-control:focus {
  outline: none;
  border-color: var(--ui-field-focus) !important;
  box-shadow: 0 0 0 3px var(--ui-field-ring) !important;
}

.ui-page .tt-page input[readonly],
.ui-page .tt-page .tt-token-input {
  background: var(--ui-surface-subdued);
  color: var(--ui-text-strong);
}

.ui-page .tt-page .invalid-feedback {
  color: var(--ui-critical-text);
  font-size: 12.5px;
}

.ui-page .tt-page .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--ui-border-strong);
  border-radius: 4px;
  background-color: var(--ui-surface);
  box-shadow: none;
  cursor: pointer;
}

.ui-page .tt-page .form-check-input:checked {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary);
}

html.dark-theme .ui-page .tt-page .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111214' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.ui-page .tt-page .form-check-input:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

/* Строка с чекбоксом: кликабельна целиком (подпись растянута на всю плашку). */
.ui-page .tt-page .tt-field--checkbox.form-group,
.ui-page .tt-page .tt-field--checkbox {
  position: relative;
  flex-direction: row;
  align-items: center;
  margin-top: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-page .tt-page .tt-field--checkbox:hover {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
}

.ui-page .tt-page .tt-field--checkbox .form-check-label {
  cursor: pointer;
}

.ui-page .tt-page .tt-field--checkbox .form-check-label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Глобальный input:focus из main.css (фиолетовое кольцо, !important) чекбоксам не нужен. */
.ui-page .tt-page input[type="checkbox"]:focus,
.ui-page .tt-page input[type="radio"]:focus,
.ui-page .tt-page .form-check-input:focus {
  border-color: var(--ui-border-strong) !important;
  box-shadow: none !important;
}

.ui-page .tt-page input[type="checkbox"]:checked:focus,
.ui-page .tt-page .form-check-input:checked:focus {
  border-color: var(--ui-primary) !important;
}

.ui-page .tt-page input[type="checkbox"]:focus-visible,
.ui-page .tt-page input[type="radio"]:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-page .tt-page .form-check-label {
  color: var(--ui-text);
  font-weight: 600;
}

.ui-page .tt-page code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 500;
}

.ui-page .tt-page pre {
  padding: 12px 14px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text);
  font-size: 12px;
}

.ui-page .tt-page pre code {
  padding: 0;
  background: transparent;
  font-weight: 500;
}

.ui-page .tt-page .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding-left: 0;
}

.ui-page .tt-page .form-check .form-check-input {
  float: none;
  margin: 0;
}

/* Старое правило #campaign-url весит больше классов — перекрываем его тем же id. */
.ui-page .ui-copy__value#campaign-url {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-strong);
  font-size: 13px;
  line-height: 36px;
}

/* В формах значение выпадающего списка обычной жирности, как текст в поле. */
html :is(.ui-page, .ui-modal, .modal) .ui-dd.crm-dropdown:not(.ui-dd--sm) .crm-dd-label {
  font-weight: 500;
}

/* Нативные чекбоксы и радио (блок пикселей и др.) — в основном цвете. */
.ui-page .tt-page input[type="checkbox"]:not(.form-check-input),
.ui-page .tt-page input[type="radio"]:not(.form-check-input) {
  accent-color: var(--ui-primary);
}

.ui-page .tt-page ::placeholder,
.ui-page ::placeholder {
  color: var(--ui-text-subdued);
  opacity: .8;
}

/* Кнопки старого образца → вид ui-btn */
.ui-page .tt-page .action-btn {
  width: auto;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-btn-edge), inset 0 -1px 0 var(--ui-btn-edge-bottom);
  color: var(--ui-text);
  font: 600 13px/1 var(--ui-font);
  transition: var(--ui-motion);
  transform-origin: center;
}

.ui-page .tt-page .action-btn:hover,
.ui-page .tt-page .action-btn:focus-visible {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border), inset 0 -1px 0 var(--ui-border-strong), 0 1px 0 rgba(0, 0, 0, .04);
  color: var(--ui-text-strong);
}

.ui-page .tt-page .action-btn:not(:disabled):hover {
  transform: var(--ui-lift);
}

.ui-page .tt-page .action-btn:not(:disabled):active {
  transform: translateY(0) scale(.98);
}

.ui-page .tt-page .action-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.ui-page .tt-page .action-btn.small {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
}

.ui-page .tt-page .action-btn svg,
.ui-page .tt-page .action-btn .bi {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.ui-page .tt-page .action-btn.btn-primary-upload {
  background: var(--ui-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 1px rgba(0, 0, 0, .2);
  color: var(--ui-primary-text);
}

.ui-page .tt-page .action-btn.btn-primary-upload:hover {
  background: var(--ui-primary-hover);
  color: var(--ui-primary-text);
}

.ui-page .tt-page .action-btn.btn-red {
  background: transparent;
  box-shadow: none;
  color: var(--ui-critical-text);
}

.ui-page .tt-page .action-btn.btn-red:hover {
  background: var(--ui-critical-surface);
  box-shadow: none;
  color: var(--ui-critical-text);
}

.ui-page .tt-page .action-btn.view-btn,
.ui-page .tt-page .tt-postback-rule__actions .action-btn.secondary {
  width: 28px;
  padding: 0;
}

.ui-page .tt-page .tt-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Тумблеры */
:is(.ui-page .tt-page, #feedbackModal) .crm-switch {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
}

:is(.ui-page .tt-page, #feedbackModal) .crm-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

:is(.ui-page .tt-page, #feedbackModal) .crm-switch .crm-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ui-border-strong);
  transition: background-color .18s ease;
  pointer-events: none;
}

:is(.ui-page .tt-page, #feedbackModal) .crm-switch .crm-switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transform: none;
  transition: transform .2s var(--ui-ease);
}

:is(.ui-page .tt-page, #feedbackModal) .crm-switch input:checked + .crm-switch-slider {
  background: var(--ui-primary);
}

html.dark-theme :is(.ui-page .tt-page, #feedbackModal) .crm-switch input:checked + .crm-switch-slider::before {
  background: #111214;
}

:is(.ui-page .tt-page, #feedbackModal) .crm-switch input:checked + .crm-switch-slider::before {
  transform: translateX(14px);
}

:is(.ui-page .tt-page, #feedbackModal) .crm-switch input:focus-visible + .crm-switch-slider {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Вкладки старого образца → вид ui-tabs */
.ui-page .tt-page .tt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-page .tt-page .tt-tab {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text-subdued);
  font: 600 13px/1 var(--ui-font);
  cursor: pointer;
}

.ui-page .tt-page .tt-tab {
  transition: var(--ui-motion);
}

.ui-page .tt-page .tt-tab:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
  transform: var(--ui-lift);
}

.ui-page .tt-page .tt-tab.is-active {
  border: 0;
  background: var(--ui-surface-selected);
  color: var(--ui-text-strong);
}

.ui-page .tt-page .tt-tab:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

/* Правила постбеков и конверсий */
.ui-page .tt-page .tt-postback-rules {
  /* Строки разделены линией: старый зазор 10px из crm-components.css делал первую строку выше остальных. */
  gap: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--ui-radius-control);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  list-style: none;
}

.ui-page .tt-page .tt-postback-rule {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui-page .tt-page .tt-postback-rule + .tt-postback-rule {
  border-top: 1px solid var(--ui-divider);
}

.ui-page .tt-page .tt-postback-rule.is-off .tt-postback-rule__title {
  color: var(--ui-text-subdued);
}

.ui-page .tt-page .tt-postback-rule__row {
  justify-content: flex-start;
}

/* Тумблер слева, название тянется, действия прижаты вправо. */
.ui-page .tt-page .tt-postback-rule__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ui-text-strong);
  font-size: 13.5px;
  font-weight: 650;
}

.ui-page .tt-page .tt-postback-rule__meta {
  display: block;
  margin-top: 2px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  font-weight: 500;
}

.ui-page .tt-page .tt-postback-rule__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Старое правило задаёт этим кнопкам 44 px через !important — перекрываем так же. */
.ui-page .tt-page .tt-postback-rule__actions .action-btn,
.ui-page .tt-page .tt-postback-rule__actions .action-btn.small.view-btn,
.ui-page .tt-page .tt-postback-rule__actions .action-btn.small.btn-red {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
}

.ui-page .tt-page .tt-postback-rule__url {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 500;
  word-break: break-all;
}

.ui-page .tt-page [data-tt-rule-empty] {
  padding: 14px;
  color: var(--ui-text-subdued);
}

/* Таблица параметров ссылки */
.ui-page .tt-page .tt-params-table-wrap {
  overflow-x: auto;
  border-radius: var(--ui-radius-control);
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

.ui-page .tt-page .tt-params-table {
  margin: 0;
  background: transparent;
  color: var(--ui-text);
}

.ui-page .tt-page .tt-params-table th {
  padding: 8px 10px;
  border: 0;
  background: var(--ui-surface-subdued);
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.ui-page .tt-page .tt-params-table td {
  padding: 6px 10px;
  border-top: 1px solid var(--ui-divider);
  border-bottom: 0;
  background: transparent;
}

.ui-page .tt-page .tt-params-table .tt-input {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 13px;
}

.ui-page .tt-page .tt-token-row,
.ui-page .tt-page .tt-copy-row {
  display: flex;
  gap: 8px;
}

/* Чипы, статусы, бейджи старого образца */
.ui-page .tt-page .tt-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 600;
}

.ui-page .tt-page .badge {
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ui-page .tt-page .badge-ok {
  background: var(--ui-success-surface);
  color: var(--ui-success-text);
}

.ui-page .tt-page .badge-issuing {
  background: var(--ui-info-surface);
  color: var(--ui-info-text);
}

.ui-page .tt-page .badge-pending {
  background: var(--ui-neutral-surface);
  color: var(--ui-text-subdued);
}

/* Переключатель потока (tt-switch) */
.ui-page .tt-page .tt-switch {
  position: relative;
  width: 34px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-border-strong);
  cursor: pointer;
}

.ui-page .tt-page .tt-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .2s var(--ui-ease);
}

.ui-page .tt-page .tt-switch.is-on {
  background: var(--ui-primary);
}

.ui-page .tt-page .tt-switch.is-on span {
  transform: translateX(14px);
}

html.dark-theme .ui-page .tt-page .tt-switch.is-on span {
  background: #111214;
}

/* Карточки старого образца внутри новых страниц */
.ui-page .tt-page .card {
  overflow: visible;
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-text);
}

.ui-page .tt-page .ui-card .card,
.ui-page .tt-page .ui-card__section > .card {
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

/* --- Visually hidden ------------------------------------------------- */
.ui-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

  .ui-metric:nth-child(3) {
    border-left: 0;
  }

  .ui-metric:nth-child(n + 3) {
    border-top: 1px solid var(--ui-divider);
  }
}

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

@media (max-width: 768px) {
  .ui-page {
    padding: 16px 12px 24px;
  }

  .ui-page__header--sticky {
    position: static;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .ui-page .ui-input {
    width: 100%;
  }

  .ui-index__tools,
  .ui-search {
    flex: 1 1 100%;
  }

  .ui-entity__meta .ui-btn {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn,
  .ui-popover,
  .ui-modal[open],
  .ui-modal[open]::backdrop {
    transition: none;
    animation: none;
  }
}

/* Поиск внутри модалки — во всю ширину, с местом под иконку. */
.ui-modal .ui-search {
  display: flex;
}

.ui-modal .ui-search .ui-input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 28px;
}

/* ====================================================================
   Единые чекбоксы и радио нового дизайна — на всех страницах и в модалках.
   Перекрывают фиолетовое кольцо фокуса из main.css (оно с !important).
   Тумблеры (crm-switch, form-switch, role=switch) не затрагиваются.
   ==================================================================== */
:root {
  --ui-check-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m5.5 10.5 3 3 6-7'/%3e%3c/svg%3e");
}

html.dark-theme {
  --ui-check-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111214' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m5.5 10.5 3 3 6-7'/%3e%3c/svg%3e");
}

html :is(.ui-page, .ui-modal) input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.crm-switch input):not(.form-switch input) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0 !important;
  border-radius: 5px;
  background: var(--ui-surface) center / 14px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong) !important;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html :is(.ui-page, .ui-modal) input[type="radio"]:not([role="switch"]):not(.crm-switch input):not(.form-switch input) {
  border-radius: 50%;
}

html :is(.ui-page, .ui-modal) input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.crm-switch input):not(.form-switch input):hover {
  box-shadow: inset 0 0 0 1.5px var(--ui-text-subdued) !important;
}

html :is(.ui-page, .ui-modal) input[type="checkbox"]:not([role="switch"]):not(.crm-switch input):not(.form-switch input):checked {
  background-color: var(--ui-primary);
  background-image: var(--ui-check-mark);
  box-shadow: inset 0 0 0 1.5px var(--ui-primary) !important;
}

html :is(.ui-page, .ui-modal) input[type="radio"]:not([role="switch"]):not(.crm-switch input):not(.form-switch input):checked {
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 5.5px var(--ui-primary) !important;
}

html :is(.ui-page, .ui-modal) input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.crm-switch input):not(.form-switch input):active {
  transform: scale(.92);
}

html :is(.ui-page, .ui-modal) input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.crm-switch input):not(.form-switch input):focus {
  outline: none !important;
}

html :is(.ui-page, .ui-modal) input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.crm-switch input):not(.form-switch input):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

html :is(.ui-page, .ui-modal) input:is([type="checkbox"], [type="radio"]):disabled {
  cursor: default;
  opacity: .5;
}

/* Список выбора (люди, роли, группы): строка кликабельна целиком,
   выбранная строка подсвечена. Чекбокс в строке списка — привычный паттерн. */
.ui-pick {
  max-height: var(--ui-pick-max, none);
  overflow-y: auto;
  border-radius: var(--ui-radius-control);
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

.ui-pick__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.ui-pick__row + .ui-pick__row {
  border-top: 1px solid var(--ui-divider);
}

.ui-pick__row:hover {
  background: var(--ui-surface-hover);
}

.ui-pick__row:has(input:checked) {
  background: var(--ui-pick-selected, rgba(0, 0, 0, .035));
}

html.dark-theme .ui-pick__row:has(input:checked) {
  --ui-pick-selected: rgba(255, 255, 255, .05);
}

.ui-pick__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.ui-pick__title {
  color: var(--ui-text-strong);
  font-weight: 650;
}

.ui-pick__meta {
  overflow: hidden;
  color: var(--ui-text-subdued);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-pick__aside {
  flex: none;
  margin-left: auto;
  color: var(--ui-text-subdued);
  font-size: 12px;
  white-space: nowrap;
}

.ui-pick-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ui-pick-bar .ui-search {
  flex: 1 1 auto;
}

.ui-pick-bar__count {
  flex: none;
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 600;
}

/* Shared animated underline for entity names, including a name inside a
   larger link. The same transition reverses when hover or focus leaves. */
.ui-page .ui-link-underline {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--ui-text-strong);
  text-decoration: none;
}
.ui-page .ui-link-underline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: currentColor;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms var(--ui-ease), opacity 180ms ease;
}
.ui-page .ui-link-underline:is(:hover, :focus-visible) {
  color: var(--ui-text-strong);
  text-decoration: none;
}
.ui-page .ui-link-underline:is(:hover, :focus-visible)::after,
.ui-page a:is(:hover, :focus-visible) .ui-link-underline::after {
  opacity: 1;
  transform: scaleX(1);
}
/* Preserve truncation and right-aligned actions in the campaign summary. */
.ui-page .tt-campaign-routes-card__name {
  flex: 0 1 auto;
  margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ui-page .ui-link-underline::after { transition: none; }
}

/* Строка-ссылка: прозрачный дубль ссылки растянут на всю строку для мыши.
   Переключатели, меню и чипы строка поднимает поверх (z-index: 2), для
   клавиатуры и экранных читалок остаётся видимая ссылка-название.
   При наведении подсвечивается только строка, название не подчёркивается. */
.ui-row-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.ui-row-link:focus {
  outline: none;
}

/* Раскрывашка (details): шеврон как у выпадающих списков, поворачивается при открытии. */
.ui-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  list-style: none;
  cursor: pointer;
  transition: color .15s ease;
}

.ui-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ui-disclosure > summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 6.2 8 9.6l3.4-3.4.9.9L8 11.4 3.7 7.1z'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 6.2 8 9.6l3.4-3.4.9.9L8 11.4 3.7 7.1z'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .18s var(--ui-ease);
}

.ui-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.ui-disclosure > summary:hover {
  color: var(--ui-text-strong);
}

.ui-disclosure > summary:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-disclosure > summary::after {
    transition: none;
  }
}

/* Предупреждение о маршруте (лендинг/оффер недоступен) — как критическая плашка
   нового дизайна: иконка старого набора вместо эмодзи, шеврон раскрывашки. */
.ui-page .tt-destination-issues {
  margin: 8px 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-critical-surface);
  color: var(--ui-critical-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.ui-page .tt-destination-issues > summary {
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-weight: 650;
}

.ui-page .tt-destination-issues > summary > svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ui-critical);
}

.ui-page .tt-destination-issues > summary::after {
  margin-left: auto;
}

.ui-page .tt-destination-issues > summary:hover {
  color: var(--ui-critical-text);
}

.ui-page .tt-destination-issues ul {
  margin: 0;
  padding: 0 12px 10px 31px;
}

.ui-page .tt-destination-issues a {
  display: inline-block;
  margin-top: 2px;
  color: var(--ui-critical-text);
  font-weight: 650;
}

/* Меню списков: поиск и кнопки «Выбрать все / Снять все» не сжимаются,
   прокручивается только перечень. Текст пунктов не выделяется при кликах. */
html .ui-dd-menu > :is(.crm-dd-search, .tags-filter-actions) {
  flex-shrink: 0;
}

html .ui-dd-menu > .crm-dd-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

html .crm-dd-menu :is(.crm-dd-option, .tags-filter-actions) {
  -webkit-user-select: none;
  user-select: none;
}

/* Пункт «Маршрута клика» на странице кампании открывает поток кликом в любом месте;
   тумблер и плашка предупреждения лежат поверх ссылки-подложки. */
.ui-page .tt-campaign-routes-card__item {
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}

.ui-page .tt-campaign-routes-card__item :is(.tt-campaign-routes-card__toggle, .tt-destination-issues) {
  position: relative;
  z-index: 2;
}

.ui-page .tt-campaign-routes-card__item:has(> .ui-row-link:hover) {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-hover);
}

/* Сетка формы нового дизайна: две колонки, широкие поля во всю строку. */
.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}

.ui-form-grid > .ui-field + .ui-field {
  margin-top: 0;
}

.ui-field--wide {
  grid-column: 1 / -1;
}

.ui-field__error {
  color: var(--ui-critical-text);
  font-size: 12.5px;
}

.ui-field__error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-page .ui-field.is-invalid .ui-input {
  box-shadow: inset 0 0 0 1px var(--ui-critical);
}

.ui-page .ui-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  font: 500 13.5px/1.5 var(--ui-font);
  resize: vertical;
}

.ui-page .ui-textarea:focus {
  border: 0 !important;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring) !important;
}

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

/* Полоса прогресса: цвет раздела, скруглённая дорожка. */
.ui-progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-neutral-surface);
  overflow: hidden;
}

.ui-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--ui-neutral-surface);
}

.ui-progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--ui-section, var(--ui-primary));
}

.ui-progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--ui-section, var(--ui-primary));
}

.ui-banner--success {
  background: var(--ui-success-surface);
}

/* Строка таблицы-ссылка (как ui-row-link у карточек). */
.ui-page .ui-table tr:has(> td > .ui-row-link) {
  position: relative;
}

.ui-page .ui-table tr:has(> td > .ui-row-link:hover) {
  background: var(--ui-surface-hover);
}

/* Плашка идущего A/B-теста на страницах кампании и потоков. */
.ui-page .ui-experiments-running {
  align-items: center;
  margin-bottom: 16px;
}

.ui-page .ui-experiments-running p,
.ui-page .ui-streams__ab-warning p {
  margin: 0;
}

.ui-page .ui-streams__ab-warning {
  margin-bottom: 16px;
}

/* Подсказки к полям: кнопка «i» рядом с подписью и тултип поверх страницы.
   Пояснение не занимает строку под полем, но доступно мышью, касанием,
   клавиатурой и экранным читалкам (aria-describedby). */
.ui-field__label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 20px;
}

.ui-field__label-row > :is(label, .ui-field__label, .ui-form-section__title, .ui-modal__section-title) {
  min-width: 0;
  margin: 0;
}

.ui-help-trigger {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-text-subdued);
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-help-trigger svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ui-help-trigger:hover {
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  transform: scale(1.08);
}

.ui-help-trigger:focus {
  outline: none;
}

.ui-help-trigger:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-tooltip {
  position: fixed;
  z-index: 2700;
  display: block;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ui-primary);
  color: var(--ui-primary-text);
  box-shadow: var(--ui-shadow-popover);
  font: 500 12px/1.5 var(--ui-font);
  white-space: normal;
  overflow-wrap: anywhere;
}

.ui-tooltip code {
  color: inherit;
}

/* В строке-чекбоксе подпись растянута на всю плашку — кнопка подсказки лежит поверх. */
.ui-page .tt-page .tt-field--checkbox .ui-help-trigger {
  position: relative;
  z-index: 1;
}

.ui-page .tt-page .form-check .ui-help-trigger {
  margin-left: 2px;
}

.ui-modal__section-head {
  margin-bottom: 8px;
}

/* Плашка успеха — мягкий зелёный, иконка в цвет текста успеха. */
.ui-banner--success {
  background: color-mix(in srgb, var(--ui-success-surface) 42%, var(--ui-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-success-text) 18%, transparent);
}

.ui-banner--success svg {
  color: var(--ui-success-text);
}

/* Мини-итог A/B-теста в карточке кампании: победитель, конверсии вариантов, разница. */
.ui-ab-result {
  display: grid;
  gap: 10px;
}

.ui-ab-result__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ui-ab-result__name {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-ab-result__arms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ui-ab-result__arm {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued, var(--ui-bg));
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

.ui-ab-result__arm.is-winner {
  background: color-mix(in srgb, var(--ui-success-surface) 38%, var(--ui-surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ui-success-text) 45%, transparent);
}

.ui-ab-result__variant {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 750;
}

.ui-ab-result__arm.is-winner .ui-ab-result__variant {
  background: var(--ui-success-text);
  color: var(--ui-surface);
}

.ui-ab-result__cr {
  color: var(--ui-text-strong);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.ui-ab-result__label {
  color: var(--ui-text-subdued);
  font-size: 11.5px;
}

.ui-ab-result__note {
  margin: 0;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Создание кампании: предпросмотр ссылки и «что дальше». */
.ui-campaign-create .ui-form-section + .ui-form-section {
  margin-top: 20px;
}

.ui-campaign-create__link {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued, var(--ui-bg));
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-strong);
  font: 600 13px/1.45 var(--ui-font);
  overflow-wrap: anywhere;
}

.ui-campaign-create__link.is-empty {
  color: var(--ui-text-subdued);
  font-weight: 500;
}

.ui-campaign-create__alias.is-auto {
  color: var(--ui-text-subdued);
  font-style: italic;
  font-weight: 500;
}

.ui-campaign-create__next {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-campaign-create__next li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.45;
}

.ui-campaign-create__next strong {
  display: block;
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.ui-campaign-create__next-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-subdued);
}

.ui-campaign-create__next-icon svg {
  width: 15px;
  height: 15px;
}

/* Массовое создание: форма слева, проверка ссылок справа. */
.ui-bulk__layout {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}

.ui-bulk .ui-card__section > .ui-form-section__title {
  margin: 0 0 12px;
}

.ui-bulk__errors {
  margin: 12px 16px 0;
}

.ui-bulk__preview .ui-table-wrap {
  max-height: 520px;
  overflow-y: auto;
}

.ui-bulk__preview code {
  color: var(--ui-text-strong);
}

.ui-bulk__help {
  margin: 0;
  padding: 10px 16px 14px;
}

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

.ui-bulk__layout > .ui-card {
  margin: 0;
}

/* Шапка карточки прямо над таблицей: отступ снизу, чтобы бейдж справа
   не упирался в строку заголовков таблицы. */
.ui-card__header:has(+ .ui-table-wrap) {
  padding-bottom: 12px;
}

/* Кнопки и меню в строке-ссылке таблицы — поверх прозрачной ссылки строки. */
.ui-page .ui-table tr:has(> td > .ui-row-link) :is(.ui-menu, .ui-btn) {
  position: relative;
  z-index: 2;
}

/* Длинный адрес во второй строке названия обрезается многоточием. */
.ui-entity__url {
  min-width: 0;
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Кампания и ещё N» в колонке использования. */
.ui-usage {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Список кампаний в окне удаления. */
.ui-dependents__title {
  margin: 14px 0 0;
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.ui-dependents {
  margin: 4px 0 0;
  padding-left: 20px;
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.6;
}

/* Условное поле (data-ui-show) скрывается атрибутом hidden. */
.ui-field[hidden] {
  display: none;
}

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

@media (max-width: 720px) {
  .ui-form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Оффер ---------------------------------------------------------- */
.ui-offer__errors {
  margin-top: 16px;
}

.ui-offer__errors ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* Метки клика: кнопка вставляет метку туда, где стоит курсор в ссылке. */
.ui-offer__tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.ui-offer__tokens-label {
  margin-right: 2px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
}

.ui-offer__token {
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-offer__token:hover {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  transform: scale(1.04);
}

.ui-offer__token:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-offer__preview {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued, var(--ui-bg));
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

.ui-offer__preview[hidden] {
  display: none;
}

.ui-offer__preview-label {
  color: var(--ui-text-subdued);
  font-size: 12px;
}

.ui-offer__preview code {
  color: var(--ui-text-strong);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ui-offer__thankyou-row {
  display: flex;
  gap: 8px;
}

.ui-offer__thankyou-row > :first-child {
  flex: 1;
  min-width: 0;
}

/* Партнёрки оффера: порядок отправки заявок, выбранная строка правится ниже. */
.ui-offer-networks {
  margin: 12px 0 0;
  padding: 0;
  border-radius: var(--ui-radius-card);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  list-style: none;
}

.ui-offer-networks__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  transition: background-color .15s ease;
}

.ui-offer-networks__row + .ui-offer-networks__row {
  box-shadow: inset 0 1px 0 var(--ui-divider);
}

.ui-offer-networks__row:first-child { border-radius: var(--ui-radius-card) var(--ui-radius-card) 0 0; }
.ui-offer-networks__row:last-child { border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card); }
.ui-offer-networks__row:only-child { border-radius: var(--ui-radius-card); }

.ui-offer-networks__row:hover {
  background: var(--ui-surface-hover);
}

.ui-offer-networks__row.is-current {
  background: var(--ui-surface-selected);
}

.ui-offer-networks__row.is-dragging {
  opacity: .5;
}

.ui-offer-networks__handle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text-subdued);
  cursor: grab;
  transition: var(--ui-motion);
}

.ui-offer-networks__handle:hover {
  background: var(--ui-surface);
  color: var(--ui-text-strong);
  transform: scale(1.08);
}

.ui-offer-networks__handle:active { cursor: grabbing; }

.ui-offer-networks__handle svg {
  width: 16px;
  height: 16px;
}

.ui-offer-networks__order {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ui-neutral-surface);
  color: var(--ui-text);
  font: 600 12px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
}

.ui-offer-networks__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ui-offer-networks__name {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-offer-networks__main:hover .ui-offer-networks__name {
  text-decoration: underline;
}

.ui-offer-networks__meta {
  color: var(--ui-text-subdued);
  font-size: 12.5px;
}

.ui-offer-networks__badges {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ui-offer__send-mode {
  margin-bottom: 16px;
}

.ui-offer__network-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui-offer__network-head .ui-form-section__title {
  margin: 0;
}

.ui-offer__network-actions {
  display: flex;
  gap: 4px;
}

.ui-offer__network-remove,
.ui-offer__network-remove svg {
  color: var(--ui-critical-text);
}

.ui-offer__network-remove:disabled,
.ui-offer__network-remove:disabled svg {
  color: var(--ui-text-disabled);
}

.ui-offer__connect {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.ui-offer__connect .ui-card__help,
.ui-offer__affiliate .ui-card__section > .ui-card__help {
  margin: 0;
}

.ui-offer__affiliate .ui-card__section > .ui-card__help {
  margin-top: 12px;
}

/* Дни недели: переключатели в ряд, выбранный день — цветом раздела. */
.ui-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ui-days__day {
  position: relative;
  cursor: pointer;
}

.ui-days__day input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-days__day span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text);
  font-weight: 600;
  transition: var(--ui-motion);
}

.ui-days__day:hover span {
  background: var(--ui-surface-hover);
  transform: scale(1.04);
}

.ui-days__day input:checked + span {
  background: var(--ui-text-strong);
  box-shadow: none;
  color: var(--ui-surface);
}

.ui-days__day input:focus-visible + span {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Чек-лист готовности: выполненный пункт отмечен галочкой, невыполненный — пустым кругом. */
.ui-checklist {
  margin: 0;
  padding: 4px 16px 14px;
  list-style: none;
}

.ui-checklist__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
}

.ui-checklist__item + .ui-checklist__item {
  border-top: 1px solid var(--ui-divider);
}

.ui-checklist__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong);
}

.ui-checklist__item.is-done .ui-checklist__mark {
  background: var(--ui-success-surface);
  box-shadow: none;
  color: var(--ui-success-text);
}

.ui-checklist__mark svg {
  width: 13px;
  height: 13px;
}

.ui-checklist__label {
  margin: 0;
  color: var(--ui-text-strong);
  font-weight: 600;
}

.ui-checklist__detail,
.ui-checklist__links {
  margin: 2px 0 0;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.45;
}

.ui-checklist__links {
  padding: 0;
  list-style: none;
}

.ui-checklist__links a {
  color: var(--ui-text);
  text-decoration: none;
}

.ui-checklist__links a:hover {
  color: var(--ui-text-strong);
  text-decoration: underline;
}

/* Одиночный флажок-карточка: отметку показывает сам флажок, рамка остаётся спокойной. */
.ui-choice--check:has(input:checked) {
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

.ui-choice--check:has(input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--ui-border), 0 0 0 2px var(--ui-focus);
}

.ui-page .tt-page .ui-offer__preview code {
  padding: 0;
  border: 0;
  background: none;
}

/* Зона загрузки файла (ui/dropzone.html): поле прозрачно лежит поверх зоны. */
.ui-dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 18px 16px;
  border: 1.5px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface-subdued, var(--ui-bg));
  text-align: center;
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-dropzone:hover,
.ui-dropzone.is-dragover {
  border-color: var(--ui-text-subdued);
  background: var(--ui-surface-hover);
}

.ui-dropzone.is-dragover {
  transform: scale(1.01);
}

.ui-dropzone.has-file {
  border-style: solid;
  border-color: var(--ui-border-strong);
  background: var(--ui-surface);
}

.ui-dropzone:has(.ui-dropzone__input:focus-visible) {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ui-dropzone__icon svg {
  width: 26px;
  height: 26px;
  color: var(--ui-text-subdued);
}

.ui-dropzone.has-file .ui-dropzone__icon svg {
  color: var(--ui-success-text);
}

.ui-dropzone__title {
  color: var(--ui-text-strong);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.ui-dropzone__hint {
  max-width: 46ch;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Название, которое меняется прямо в заголовке страницы. */
.ui-rename {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ui-rename .ui-page__title {
  min-width: 0;
  margin: 0;
}

.ui-rename__input {
  width: min(100%, 36ch);
  max-width: min(56vw, 640px);
  margin: -3px -8px;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  transition: var(--ui-motion);
}

@supports (field-sizing: content) {
  .ui-rename__input {
    width: auto;
    min-width: 6ch;
    field-sizing: content;
  }
}

.ui-rename__input:hover:not([readonly]) {
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

.ui-rename__input:focus {
  outline: none;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1.5px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
}

.ui-rename__input[readonly] {
  cursor: default;
}

/* main.css задаёт шрифт всем элементам с !important — метки ссылки моноширинные. */
.ui-offer__token,
.ui-page .tt-page .ui-offer__preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

.ui-dropzone .ui-dropzone__icon svg.btn-icon {
  width: 28px;
  height: 28px;
}

/* --- Загрузка лендинга ------------------------------------------------ */
.ui-landing-upload__progress {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
}

.ui-landing-upload__progress[hidden],
.ui-landing-upload__error[hidden] {
  display: none;
}

.ui-landing-upload__error {
  margin-top: 12px;
}

.ui-landing-upload__rules {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.45;
}

.ui-landing-upload__rules strong {
  display: block;
  color: var(--ui-text-strong);
  font-size: 13px;
}

.ui-landing-upload__rules code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Раскрывашка с предупреждениями в строке-ссылке — поверх ссылки строки. */
.ui-page .ui-table tr:has(> td > .ui-row-link) .tt-destination-issues {
  position: relative;
  z-index: 2;
}

/* --- Домены --------------------------------------------------------- */
.ui-domains__banner {
  margin-bottom: 16px;
}

.ui-domains__name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Та же кнопка копирования, что у кампаний (.ui-entity__meta .ui-btn). */
.ui-domains__copy {
  width: 22px;
  height: 22px;
  margin: -3px 0;
  border-radius: 6px;
  opacity: 0;
}

.ui-domains__copy svg {
  width: 14px;
  height: 14px;
}

.ui-table tr:hover .ui-domains__copy,
.ui-domains__copy:focus-visible {
  opacity: 1;
}

.ui-domains__root {
  display: table-cell;
}

.ui-domains__root .tt-destination-issues {
  margin-top: 4px;
}

.ui-domains__root-link {
  position: relative;
  z-index: 2;
  color: var(--ui-text);
  text-decoration: none;
}

.ui-domains__root-link:hover {
  color: var(--ui-text-strong);
}

/* --- Страница домена и добавление домена ---------------------------- */
.ui-domain__notices {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.ui-domain__notices:not(:has(*)) {
  display: none;
}

.ui-domain__lead {
  margin: 0 0 12px;
}

.ui-domain__form-error {
  margin-bottom: 12px;
}

.ui-domain__facts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 4px 16px 14px;
}

.ui-domain__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ui-domain__facts dt {
  color: var(--ui-text-subdued);
  font-weight: 500;
}

.ui-domain__facts dd {
  margin: 0;
  color: var(--ui-text-strong);
  font-weight: 600;
  text-align: right;
}

.ui-domain__log {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ui-divider);
}

.ui-domain__log-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ui-domain__log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ui-text-subdued);
  font-size: 12px;
}

.ui-domain__log-list code {
  display: block;
  margin-top: 4px;
  color: var(--ui-text);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.ui-domain__steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 18px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.45;
}

.ui-domain__steps strong {
  display: block;
  color: var(--ui-text-strong);
  font-size: 13px;
}

.ui-domain__banner {
  margin-top: 16px;
}

.ui-domain__ip {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2px;
  margin: 2px 0;
  color: var(--ui-text-strong);
  font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.ui-domain__ip .ui-btn {
  width: 24px;
  height: 24px;
}

.ui-domain__ip svg {
  width: 14px;
  height: 14px;
}

.ui-domain__steps--plain {
  padding-left: 0;
  list-style: none;
}

.ui-domain__steps--wide {
  font-size: 13px;
}

/* Ссылки инструкций (Cloudflare, пиксели, импорт) — обычные синие подчёркнутые, сразу видно, что кликается. */
.ui-domain__steps a {
  color: var(--ui-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ui-domain__steps a:hover {
  text-decoration-thickness: 2px;
}

.ui-domain__perms {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.ui-domain__perms code {
  margin-right: 6px;
  color: var(--ui-text-strong);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* --- Пиксели --------------------------------------------------------- */
.ui-pixels .ui-card + .ui-card {
  margin-top: 16px;
}

.ui-pixels__status {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.ui-pixels__status:empty {
  display: none;
}

.ui-pixels__lead,
.ui-pixels__empty {
  margin: 2px 0 0;
}

.ui-pixels__lead {
  margin-bottom: 12px;
}

.ui-pixels__strong {
  color: var(--ui-text-strong);
  font-weight: 650;
}

.ui-pixels__url {
  color: var(--ui-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ui-pixels__campaigns {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 420px;
}

.ui-pixels__campaigns a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text);
  font-size: 12px;
  text-decoration: none;
  transition: var(--ui-motion);
}

.ui-pixels__campaigns a:hover {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text-strong);
}

.ui-pixels__modal-body {
  display: grid;
  gap: 14px;
}

/* Выбор кампаний и пикселей (nutra ConnectionPicker) в новом дизайне —
   как ui-pick: строка кликабельна целиком, выбранная подсвечена нейтрально. */
.ui-page .tt-picker {
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text);
}

.ui-page .tt-picker-toolbar {
  padding: 8px;
  border-bottom: 1px solid var(--ui-divider);
}

.ui-page .tt-picker-toolbar [data-picker-count] {
  color: var(--ui-text-subdued);
  font-weight: 600;
}

.ui-page .tt-picker-option {
  min-height: 48px;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--ui-divider);
  transition: background-color .15s ease;
}

.ui-page .tt-picker-option:hover,
.ui-page .tt-picker-option--modes:hover {
  background: var(--ui-surface-hover);
}

.ui-page .tt-picker-option:has(input:checked),
.ui-page .tt-picker-option--modes:has(.tt-picker-checkbox:checked) {
  background: var(--ui-pick-selected, rgba(0, 0, 0, .035));
  box-shadow: none;
}

html.dark-theme .ui-page .tt-picker {
  --ui-pick-selected: rgba(255, 255, 255, .05);
}

.ui-page .tt-picker-option--modes:not(:has(.tt-picker-checkbox:checked)) {
  background: transparent;
}

.ui-page .tt-picker-description strong {
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.ui-page .tt-picker-description small {
  color: var(--ui-text-subdued);
}

.ui-page .tt-picker-status {
  background: var(--ui-success-text);
}

.ui-page .tt-picker-status.is-off {
  background: var(--ui-border-strong);
}

.ui-page .tt-picker-mode {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-subdued);
  transition: var(--ui-motion);
}

.ui-page .tt-picker-mode:hover {
  color: var(--ui-text-strong);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
}

.ui-page .tt-picker-mode:has(input:checked) {
  background: var(--ui-neutral-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text-strong);
}

.ui-page .tt-picker-empty {
  color: var(--ui-text-subdued);
}

/* В окнах с сеткой полей отступ задаёт сетка, а не соседнее поле. */
:is(.ui-pixels__modal-body, .ui-landing__modal-body) > .ui-field + .ui-field {
  margin-top: 0;
}

/* Тёмная тема: старые блоки трекера внутри нового дизайна брали сине-серую палитру
   (slate: #1a1f2e, #222836, рамки #2f3848) и фиолетовые акценты. Здесь они нейтральные,
   как токены ui. Производные переменные (--bg-white, --primary…) задаём явно: они
   вычисляются на html и наследуются готовыми значениями. */
html.dark-theme :is(.ui-page, .ui-modal, .ui-popover, .ui-dd-menu, .crm-dd-menu, .ui-tooltip) {
  --tt-bg: var(--ui-bg);
  --tt-bg-white: var(--ui-surface);
  --tt-bg-soft: var(--ui-surface-hover);
  --tt-border: var(--ui-border);
  --tt-border-strong: var(--ui-border-strong);
  --tt-text: var(--ui-text);
  --tt-text-light: var(--ui-text-subdued);
  --tt-text-muted: var(--ui-text-subdued);
  --tt-primary: var(--ui-text-strong);
  --tt-primary-dark: var(--ui-text-strong);
  --tt-primary-light: rgba(255, 255, 255, .08);
  --tt-primary-border: rgba(255, 255, 255, .18);
  --tt-focus-ring: var(--ui-field-ring);
  --tt-editor-bg: var(--ui-surface);
  --tt-editor-side: var(--ui-surface-subdued);
  --tt-editor-hover: var(--ui-surface-hover);
  --tt-editor-active: var(--ui-surface-selected);
  --tt-code-text: var(--ui-text);
  --bg-light: var(--ui-bg);
  --bg-white: var(--ui-surface);
  --bg-elevated: var(--ui-surface-hover);
  --light-gray: var(--ui-surface-hover);
  --bg-soft: var(--ui-surface-hover);
  --bg-soft-2: var(--ui-surface-selected);
  --bg-soft-3: #313339;
  --bg-inset: rgba(255, 255, 255, .06);
  --overlay-soft: rgba(28, 29, 32, .92);
  --border: var(--ui-border);
  --border-strong: var(--ui-border-strong);
  --text: var(--ui-text);
  --text-main: var(--ui-text);
  --text-light: var(--ui-text-subdued);
  --text-strong: var(--ui-text-strong);
  --primary: var(--ui-text-strong);
  --primary-dark: var(--ui-text-strong);
  --primary-ink: var(--ui-text-strong);
  --primary-light: rgba(255, 255, 255, .08);
  --primary-border: rgba(255, 255, 255, .18);
  --secondary-light: rgba(255, 255, 255, .08);
  --secondary-border: rgba(255, 255, 255, .16);
  --secondary-dark: rgba(255, 255, 255, .12);
  --base-body-bg: var(--ui-bg);
  --base-body-color: var(--ui-text);
  --base-border-color: var(--ui-border);
  --base-secondary-color: var(--ui-text-subdued);
  --base-tertiary-color: var(--ui-text-subdued);
}

html.dark-theme :is(.ui-page, .ui-modal) option {
  background: var(--ui-surface);
  color: var(--ui-text);
}

/* Подпись кнопки не сдвигаем: в шрифте интерфейса (Noto Sans) flex ставит прописные
   на 0.5px выше центра, а строчные — на 0.5px ниже; глазом это ровно по центру.
   Замерено по рендеру Noto Sans 2026-10-30, любой сдвиг заметно хуже. */
.ui-btn {
  box-sizing: border-box;
}

/* --- Cloudflare: фирменная кнопка-капсула и баннер ------------------- */
.ui-btn--cloudflare {
  gap: 8px;
  padding-right: 16px;
  padding-left: 12px;
  border-radius: 999px;
  background: #f38020;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .16);
  color: #fff;
}

.ui-btn--cloudflare:hover {
  background: #e3700f;
  color: #fff;
}

.ui-btn--cloudflare:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-btn--cloudflare > svg {
  width: 22px;
  height: 22px;
}

.ui-banner--cloudflare {
  align-items: center;
  background: rgba(243, 128, 32, .09);
  box-shadow: inset 0 0 0 1px rgba(243, 128, 32, .26);
}

.ui-banner--cloudflare > svg {
  width: 26px;
  height: 26px;
  margin-top: 0;
  color: #f38020;
}

html.dark-theme .ui-banner--cloudflare {
  background: rgba(243, 128, 32, .12);
  box-shadow: inset 0 0 0 1px rgba(243, 128, 32, .3);
}

.ui-btn[hidden] {
  display: none;
}

.ui-networks__banner {
  margin-bottom: 16px;
}

button.ui-tabs__tab {
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* --- Партнёрки ------------------------------------------------------- */
.ui-networks__tabs {
  flex-wrap: wrap;
  row-gap: 4px;
}

.ui-networks__param {
  color: var(--ui-text);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  overflow-wrap: anywhere;
}

.ui-networks [data-catalog-row][hidden],
.ui-networks .ui-table-wrap[hidden],
.ui-networks .ui-card[hidden],
.ui-networks .ui-card__section[hidden] {
  display: none;
}

.ui-networks__callback {
  display: block;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued, var(--ui-bg));
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-strong);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  overflow-wrap: anywhere;
}

.ui-networks__notes {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.45;
}

.ui-networks__offers {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 4px 8px 10px;
  list-style: none;
}

.ui-networks__offers a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  color: var(--ui-text);
  text-decoration: none;
  transition: background-color .15s ease;
}

.ui-networks__offers a:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

.ui-networks__lead {
  margin: 0 0 12px;
}

.ui-offer__param-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued, var(--ui-bg));
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
}

.ui-offer__param-hint[hidden] {
  display: none;
}

.ui-offer__param-hint p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--ui-text);
}

.ui-offer__param-hint code {
  color: var(--ui-text-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* --- Пиксели кампании: две сети рядом, «Новый пиксель» у каждой ------ */
.ui-campaign-pixels__head,
.ui-campaign-pixels__network-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ui-campaign-pixels__head .ui-form-section__title {
  margin: 0;
}

.ui-campaign-pixels__network-head h4 {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 650;
}

.ui-campaign-pixels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.ui-campaign-pixels__modes {
  margin-top: 14px;
}

.ui-campaign-pixels__status {
  margin: 10px 0 0;
}

/* Строка пикселя: отметка и название слева, «Изменить» и статус справа. */
.ui-page .tt-picker-option--pixel {
  cursor: default;
}

.ui-page .tt-picker-option--pixel:has(.tt-picker-checkbox:checked) {
  background: var(--ui-pick-selected, rgba(0, 0, 0, .035));
}

.tt-picker-edit {
  flex: none;
  width: 26px;
  height: 26px;
  opacity: 0;
}

.tt-picker-edit svg {
  width: 15px;
  height: 15px;
}

.tt-picker-option:hover .tt-picker-edit,
.tt-picker-edit:focus-visible {
  opacity: 1;
}

.ui-pixel-modal__body {
  display: grid;
  gap: 14px;
}

.ui-pixel-modal__body .ui-banner ul {
  margin: 0;
  padding-left: 16px;
}

.ui-pixel-modal__body [hidden] {
  display: none;
}

.ui-campaign-pixels {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ui-divider);
}

/* Тумблеры старого образца в тёмной теме: старое правило красит их в фиолетовый
   (#7c3aed, #3a3450) с большей специфичностью — перекрываем нейтральными. */
html.dark-theme :is(.ui-page .tt-page, #feedbackModal) .crm-switch .crm-switch-slider {
  background: var(--ui-border-strong);
  box-shadow: none;
}

html.dark-theme :is(.ui-page .tt-page, #feedbackModal) .crm-switch input:checked + .crm-switch-slider {
  background: var(--ui-primary);
}

/* --- Постбеки и правила событий кампании ----------------------------- */
.ui-page .tt-page .tt-postback-rule {
  transition: background-color .15s ease;
}

.ui-page .tt-page .tt-postback-rule:hover {
  background: var(--ui-surface-hover);
}

.ui-page .tt-page .tt-postback-rule__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ui-page .tt-page .tt-postback-rule__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Кнопки лендинга у правила события — обычный текст: моноширинный шрифт только у адресов постбэков. */
.ui-page .tt-page .tt-postback-rule__note {
  margin: 8px 0 0;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.ui-rule-remove:hover {
  background: var(--ui-critical-surface);
  color: var(--ui-critical-text);
}

.ui-rule-empty {
  padding: 14px;
  color: var(--ui-text-subdued);
}

.ui-rule-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-divider);
}

.ui-rule-editor[hidden] {
  display: none;
}

.ui-rule-editor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}

.ui-rule-editor__actions .ui-card__help {
  margin: 0;
}

.ui-rule-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12.5px;
}

.ui-rule-new {
  margin-top: 16px;
}

.ui-rule-new > summary {
  color: var(--ui-text-strong);
  font-weight: 650;
}

.ui-rule-new__body {
  margin-top: 12px;
}

.ui-macros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.ui-macros__label {
  color: var(--ui-text-subdued);
  font-size: 12.5px;
}

.ui-macros__item {
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-macros__item:hover {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  transform: scale(1.04);
}

.ui-macros__item:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Кнопки макросов под текстом сообщения (message_macro_buttons.js) — один вид во всех
   местах, где пишется сообщение: пуши, автоворонки, воронки, макросы, быстрые макросы чата. */
body:not(#_) .message-macros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

body:not(#_) .message-macro-chip {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text);
  box-shadow: none;
  font: 550 12px/1 var(--ui-font);
  cursor: pointer;
  transition: var(--ui-motion);
}

body:not(#_) .message-macro-chip:hover {
  border: 0;
  background: var(--ui-surface-selected);
  color: var(--ui-text-strong);
  box-shadow: none;
  transform: var(--ui-lift);
}

body:not(#_) .message-macro-chip:active {
  transform: none;
}

body:not(#_) .message-macro-chip:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

body:not(#_) .message-macro-chip.is-copied {
  background: var(--ui-success-surface);
  color: var(--ui-success-text);
}

/* Поле только для чтения с кнопкой копирования справа. */
.ui-copy-field {
  display: flex;
  gap: 8px;
}

.ui-copy-field .ui-input {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-postback-in__secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.ui-postback-in__note {
  margin: 12px 0 0;
}

.ui-postback-in__note code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.ui-postback-in__examples {
  margin-top: 10px;
}

.ui-code {
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-subdued, var(--ui-bg));
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text);
  font-size: 12px;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.ui-page .ui-textarea.ui-rule-url {
  font-size: 12.5px;
  line-height: 1.5;
}


/* --- Загрузчик «Орбита» со знаком lidvanto (templates/ui/loader.html, ui-loader.js) ---
   Знак держится, три четверти скругляются в точки, четыре точки делают оборот вокруг
   центра, на ходу сжимаясь к середине, и раскладываются обратно в знак — цикл 2,8 с.
   Координаты — в процентах от знака (сетка 100×100, как viewBox логотипа): четверть —
   клетка 35% со скруглением внешнего угла 30/35, точка — круг 24% у внешнего угла. */
.ui-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ui-text-subdued);
  font-size: 13px;
}

.ui-loader__mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: #e96b42;
  contain: layout;
}

.ui-loader--sm .ui-loader__mark { width: 24px; height: 24px; }
.ui-loader--lg .ui-loader__mark { width: 64px; height: 64px; }

.ui-loader__orbit {
  position: absolute;
  inset: 0;
  animation: ui-loader-orbit 2.8s cubic-bezier(.65, 0, .35, 1) infinite;
}

.ui-loader__part {
  position: absolute;
  background: currentColor;
  animation: 2.8s cubic-bezier(.65, 0, .35, 1) infinite;
}

.ui-loader__part--tl { left: 11%; top: 11%; width: 35%; height: 35%; border-radius: 85.71% 14.29% 14.29% 14.29%; animation-name: ui-loader-tl; }
.ui-loader__part--tr { left: 54%; top: 11%; width: 35%; height: 35%; border-radius: 14.29% 85.71% 14.29% 14.29%; animation-name: ui-loader-tr; }
.ui-loader__part--bl { left: 11%; top: 54%; width: 35%; height: 35%; border-radius: 14.29% 14.29% 14.29% 85.71%; animation-name: ui-loader-bl; }
.ui-loader__part--dot { left: 64.5%; top: 64.5%; width: 24%; height: 24%; border-radius: 50%; animation-name: ui-loader-dot; }

@keyframes ui-loader-orbit {
  0%, 26% { transform: rotate(0); }
  74%, 100% { transform: rotate(360deg); }
}

@keyframes ui-loader-tl {
  0%, 12% { left: 11%; top: 11%; width: 35%; height: 35%; border-radius: 85.71% 14.29% 14.29% 14.29%; }
  26%, 74% { left: 11.5%; top: 11.5%; width: 24%; height: 24%; border-radius: 50%; }
  50% { left: 26%; top: 26%; width: 18%; height: 18%; border-radius: 50%; }
  88%, 100% { left: 11%; top: 11%; width: 35%; height: 35%; border-radius: 85.71% 14.29% 14.29% 14.29%; }
}

@keyframes ui-loader-tr {
  0%, 12% { left: 54%; top: 11%; width: 35%; height: 35%; border-radius: 14.29% 85.71% 14.29% 14.29%; }
  26%, 74% { left: 64.5%; top: 11.5%; width: 24%; height: 24%; border-radius: 50%; }
  50% { left: 56%; top: 26%; width: 18%; height: 18%; border-radius: 50%; }
  88%, 100% { left: 54%; top: 11%; width: 35%; height: 35%; border-radius: 14.29% 85.71% 14.29% 14.29%; }
}

@keyframes ui-loader-bl {
  0%, 12% { left: 11%; top: 54%; width: 35%; height: 35%; border-radius: 14.29% 14.29% 14.29% 85.71%; }
  26%, 74% { left: 11.5%; top: 64.5%; width: 24%; height: 24%; border-radius: 50%; }
  50% { left: 26%; top: 56%; width: 18%; height: 18%; border-radius: 50%; }
  88%, 100% { left: 11%; top: 54%; width: 35%; height: 35%; border-radius: 14.29% 14.29% 14.29% 85.71%; }
}

@keyframes ui-loader-dot {
  0%, 26%, 74%, 100% { left: 64.5%; top: 64.5%; width: 24%; height: 24%; }
  50% { left: 56%; top: 56%; width: 18%; height: 18%; }
}

/* «Уменьшить движение»: знак стоит, только точка мягко мигает. */
@media (prefers-reduced-motion: reduce) {
  .ui-loader__orbit,
  .ui-loader__part { animation: none; }
  .ui-loader__part--dot { animation: ui-loader-blink 1.6s ease-in-out infinite; }
}

@keyframes ui-loader-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}


/* --- Маленькие загрузчики: знак вместо крутящегося кольца ----------------
   Старые спиннеры (кнопки, поля, статус сообщения, списки) — одиночные элементы или
   псевдоэлементы, вложить SVG в них нельзя. Знак рисуем фоном из двух слоёв:
   четверти стоят, точка «заходит» на место (сдвиг фона в em от размера знака).
   Когда спиннер виден, по-прежнему решают старые правила (display / is-loading). */
:root {
  --ui-mark-quarters: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23e96b42'%3E%3Cpath d='M40.955 11a5.045 5.045 0 0 1 5.045 5.045v24.91A5.045 5.045 0 0 1 40.955 46h-24.91A5.045 5.045 0 0 1 11 40.955 29.955 29.955 0 0 1 40.955 11Z'/%3E%3Cpath d='M59.045 11A29.955 29.955 0 0 1 89 40.955 5.045 5.045 0 0 1 83.955 46h-24.91A5.045 5.045 0 0 1 54 40.955v-24.91A5.045 5.045 0 0 1 59.045 11Z'/%3E%3Cpath d='M16.045 54h24.91A5.045 5.045 0 0 1 46 59.045v24.91A5.045 5.045 0 0 1 40.955 89 29.955 29.955 0 0 1 11 59.045 5.045 5.045 0 0 1 16.045 54Z'/%3E%3C/svg%3E");
  --ui-mark-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23e96b42'%3E%3Ccircle cx='76.5' cy='76.5' r='12'/%3E%3C/svg%3E");
}

.message-status .spinner,
.tt-dd-spinner,
.stats-filter-apply-btn__spinner,
.tt-ads-job-step__spinner,
.spinner-border,
#filters-tab .sidebar-msg-search-wrap.is-loading .sidebar-msg-search-field::after,
.tg-auth-btn--loading::after {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ui-mark-quarters) 0 0 / 100% 100% no-repeat,
              var(--ui-mark-dot) 0 0 / 100% 100% no-repeat !important;
  box-shadow: none !important;
  animation: ui-mark-mini 1.4s cubic-bezier(.34, 1.2, .5, 1) infinite !important;
  transform: none;
}

/* Сдвиг точки задаём в em: font-size элемента = его ширине. */
.tt-dd-spinner,
#filters-tab .sidebar-msg-search-wrap.is-loading .sidebar-msg-search-field::after { font-size: 14px; }
.message-status .spinner { font-size: 12px; }
.tt-ads-job-step__spinner { font-size: 13px; }
.stats-filter-apply-btn__spinner, .spinner-border-sm { font-size: 16px; }
.tg-auth-btn--loading::after { font-size: 18px; }
.spinner-border { font-size: 2rem; }
@keyframes ui-mark-mini {
  0% { background-position: 0 0, .42em .42em; }
  45%, 80% { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, .42em .42em; }
}

@media (prefers-reduced-motion: reduce) {
  .message-status .spinner, .tt-dd-spinner, .stats-filter-apply-btn__spinner, .tt-ads-job-step__spinner, .spinner-border, #filters-tab .sidebar-msg-search-wrap.is-loading .sidebar-msg-search-field::after, .tg-auth-btn--loading::after {
    animation: none !important;
  }
}

/* Блок-загрузчик для списков и окон, которые заполняет скрипт (window.uiLoader). */
.ui-loader-block {
  display: grid;
  place-items: center;
  padding: 32px 12px;
}


/* --- Чекбоксы: один стиль на всё приложение ---------------------------------
   Тот же флажок, что на страницах нового дизайна (.ui-page выше), теперь везде:
   мессенджер, воронки, окна, выпадающие списки. Старые варианты (нативный
   с фиолетовым accent-color, pipeline-checkbox с фиолетовой заливкой и фокусом,
   «квадрат в квадрате» в рекламных фильтрах) перекрыты здесь.
   — 18×18 (размер без !important: флажки, спрятанные старым CSS через
     position/opacity/display, так и остаются спрятанными), рамка 1.5px
     внутренней тенью, скругление 5px;
   — отмечен: тёмная заливка и белая галочка (в тёмной теме наоборот),
     галочка «впрыгивает»; нажатие слегка утапливает флажок;
   — фокус мышью без обводки, синее кольцо только с клавиатуры.
   Размер — через :where, чтобы флажки, которые старый CSS прячет нулевым
   размером, не проявились. Переключатели (crm-switch и т.п.) не затрагиваются. */
:where(input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input)) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  border: 0 !important;
  border-radius: 5px !important;
  background-color: var(--ui-surface) !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px;
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong) !important;
  outline: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease !important;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input).pipeline-checkbox,
:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input).form-check-input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  float: none;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):hover:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px var(--ui-text-subdued) !important;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):active:not(:disabled) {
  transform: scale(.88);
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):is(:checked, :indeterminate) {
  background-color: var(--ui-primary) !important;
  box-shadow: inset 0 0 0 1.5px var(--ui-primary) !important;
}

/* Анимация — только у флажка, который отмечает или снимает сам человек.
   ui.js в момент нажатия помечает флажок data-ui-check-from="off|on" (из какого
   состояния он уходит), и анимация стартует в том же кадре, что и смена состояния.
   «Выбрать все» и перерисованные скриптом списки не мигают: пометки у них нет. */
:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input)[data-ui-check-from="off"]:is(:checked, :indeterminate) {
  animation: ui-check-pop .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* Снятие — зеркально отметке: пока идёт анимация, флажок остаётся тёмным и белая
   галочка сжимается к центру; после неё ui.js снимает пометку и заливка плавно
   светлеет (переход background-color выше). */
:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input)[data-ui-check-from="on"]:not(:checked, :indeterminate) {
  background-color: var(--ui-primary) !important;
  background-image: var(--ui-check-mark) !important;
  box-shadow: inset 0 0 0 1.5px var(--ui-primary) !important;
  animation: ui-check-out .2s cubic-bezier(.55, 0, .45, 1) forwards;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):checked {
  background-image: var(--ui-check-mark) !important;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2.6' d='M5.5 10h9'/%3e%3c/svg%3e") !important;
}

html.dark-theme body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111214' stroke-linecap='round' stroke-width='2.6' d='M5.5 10h9'/%3e%3c/svg%3e") !important;
}

/* main.css красит фокус любого input фиолетовым с !important — у флажков его нет. */
:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):focus {
  outline: none !important;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):focus:not(:checked, :indeterminate) {
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong) !important;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input):disabled {
  opacity: .45;
  cursor: not-allowed;
}

:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input)::before,
:is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input)::after {
  content: none !important;
}

/* Тот же «прыжок» и «сжатие» у флажков на страницах .ui-page (правило выше сильнее). */
html :is(.ui-page, .ui-modal) input[type="checkbox"]:not([role="switch"]):not(.crm-switch input):not(.form-switch input)[data-ui-check-from="off"]:checked {
  animation: ui-check-pop .3s cubic-bezier(.34, 1.56, .64, 1);
}

html :is(.ui-page, .ui-modal) input[type="checkbox"]:not([role="switch"]):not(.crm-switch input):not(.form-switch input)[data-ui-check-from="on"]:not(:checked) {
  animation: ui-check-out .22s ease-in forwards;
}

@keyframes ui-check-out {
  0% { background-size: 14px 14px; transform: scale(1); }
  50% { transform: scale(.92); }
  100% { background-size: 0 0; transform: scale(1); }
}

@keyframes ui-check-pop {
  0% { background-size: 0 0; transform: scale(.88); }
  60% { background-size: 17px 17px; transform: scale(1.06); }
  100% { background-size: 14px 14px; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  :is(html, html.dark-theme) body input[type="checkbox"]:not([role="switch"]):not(:is(.crm-switch, .form-switch, .app-switch, .model-switch, .permission-switch, .translation-settings__toggle) input),
  html :is(.ui-page, .ui-modal) input[type="checkbox"] {
    transition: none !important;
    animation: none !important;
  }
}


/* --- Все меню и списки выбора в одном стиле с .ui-menu ------------------------
   Контекстные меню чата и сообщений, выпадающие списки (crm-dd), меню этапов,
   «Данные лида» и списки «Фильтра по рекламе» — пункты как у .ui-menu__item:
   высота 34px, иконка 16px, наведение — фон и лёгкий подъём; меню открывается
   с той же плавной анимацией, что .ui-popover. */
:is(html, html.dark-theme) body :is(.crm-context-menu, .crm-dd-menu, .pipeline-dropdown-menu, .chat-ad-dropdown-panel, .tag-pill-dropdown) {
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform-origin: top left;
  animation: ui-menu-in .18s var(--ui-ease);
}

@keyframes ui-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

:is(html, html.dark-theme) body :is(
  .crm-context-menu .crm-context-menu__item,
  .crm-dd-menu .crm-dd-option,
  .pipeline-dropdown-menu .stage-item,
  .pipeline-dropdown-menu .pipeline-header,
  .chat-ad-dropdown-panel .chat-ad-dropdown-options li:where(:not(.chat-ad-dropdown-empty)),
  .tag-pill-dropdown .tag-dd-btn
) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font: 500 13px/1.25 var(--ui-font);
  text-align: left;
  cursor: pointer;
  transition: var(--ui-motion);
}

:is(html, html.dark-theme) body :is(
  .crm-context-menu .crm-context-menu__item,
  .crm-dd-menu .crm-dd-option,
  .pipeline-dropdown-menu .stage-item,
  .pipeline-dropdown-menu .pipeline-header,
  .chat-ad-dropdown-panel .chat-ad-dropdown-options li:where(:not(.chat-ad-dropdown-empty)),
  .tag-pill-dropdown .tag-dd-btn
):is(:hover, :focus-visible) {
  outline: none;
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
  /* Строки списков широкие: «широкий» подъём, чтобы не наезжать на соседей и поиск. */
  transform: var(--ui-lift-wide);
}

/* Поиск в выпадающих списках отделён от первой строки — подъём при наведении на него не залезает. */
:is(html, html.dark-theme) body :is(.crm-dd-menu, .pipeline-dropdown-menu, .chat-ad-dropdown-panel) > :is(.crm-clearable, .dropdown-search, .chat-ad-dropdown-search-wrap) {
  margin-bottom: 6px;
}

/* Поле поиска внутри любого выпадающего списка — одно на всё приложение, как в Shopify:
   32px, лупа слева, обычный (не жирный) 13px текст, нейтральная рамка в фокусе.
   body:not(#_) — выше старых тёмных правил chat.css для поиска тегов. */
:is(html, html.dark-theme) body:not(#_) :is(
  .crm-dd-menu .crm-dd-search,
  .chat-ad-dropdown-panel .chat-ad-dropdown-search,
  :is(.pipeline-dropdown-menu, .lead-dropdown-menu) .dropdown-search :is(.form-control, .crm-dd-search),
  .transparent-dropdown-menu .crm-dd-search
) {
  width: 100%;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 28px 0 32px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 8px;
  background: var(--ui-surface) var(--ui-search-icon) no-repeat 10px 50% / 14px;
  box-shadow: none;
  color: var(--ui-text);
  font: 450 13px/20px var(--ui-font);
  letter-spacing: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

:is(html, html.dark-theme) body:not(#_) :is(
  .crm-dd-menu .crm-dd-search,
  .chat-ad-dropdown-panel .chat-ad-dropdown-search,
  :is(.pipeline-dropdown-menu, .lead-dropdown-menu) .dropdown-search :is(.form-control, .crm-dd-search),
  .transparent-dropdown-menu .crm-dd-search
)::placeholder {
  color: var(--ui-text-subdued);
  opacity: 1;
}

:is(html, html.dark-theme) body:not(#_) :is(
  .crm-dd-menu .crm-dd-search,
  .chat-ad-dropdown-panel .chat-ad-dropdown-search,
  :is(.pipeline-dropdown-menu, .lead-dropdown-menu) .dropdown-search :is(.form-control, .crm-dd-search),
  .transparent-dropdown-menu .crm-dd-search
):focus {
  outline: none !important;
  border-color: var(--ui-field-focus) !important;
  box-shadow: 0 0 0 3px var(--ui-field-ring) !important;
}

/* Поле без обёртки отделено от списка так же, как обёрнутое (crm-clearable). */
:is(html, html.dark-theme) body:not(#_) :is(.crm-dd-menu > .crm-dd-search, .chat-ad-dropdown-panel > .chat-ad-dropdown-search) {
  margin-bottom: 6px;
}

/* Список с прокруткой: строка при наведении чуть увеличивается — без запаса по краям
   это давало горизонтальный скролл («Фильтр по рекламе»). */
:is(html, html.dark-theme) body .chat-ad-dropdown-panel .chat-ad-dropdown-options {
  margin: -2px -2px 0;
  padding: 2px;
  overflow-x: hidden;
}

:is(html, html.dark-theme) body .crm-dd-menu .crm-dd-options {
  display: grid;
  gap: 2px;
  padding-top: 2px;
}

:is(html, html.dark-theme) body .crm-context-menu .crm-context-menu__item-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ui-text-subdued);
}

:is(html, html.dark-theme) body .crm-context-menu .crm-context-menu__item-icon svg {
  width: 16px;
  height: 16px;
}

:is(html, html.dark-theme) body:not(#_) .crm-context-menu .crm-context-menu__item--danger,
:is(html, html.dark-theme) body:not(#_) .crm-context-menu .crm-context-menu__item--danger .crm-context-menu__item-icon {
  color: var(--ui-critical-text);
}

/* body:not(#_) поднимает специфичность выше общего правила наведения: иначе «Удалить у лида»
   при наведении становился серым, а не красным. */
:is(html, html.dark-theme) body:not(#_) .crm-context-menu .crm-context-menu__item--danger:is(:hover, :focus-visible),
:is(html, html.dark-theme) body:not(#_) .crm-context-menu .crm-context-menu__item--danger:is(:hover, :focus-visible) .crm-context-menu__item-icon {
  background: var(--ui-critical-surface);
  color: var(--ui-critical-text);
}

:is(html, html.dark-theme) body .crm-context-menu .crm-context-menu__sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--ui-divider);
}

/* Открытое поле выпадающего списка не приподнимается при наведении: меню прилегает
   к нему ровно и не меняет ширину, когда курсор уходит с поля. */
:is(html, html.dark-theme) body:not(#_) :is(.crm-dd-btn.open, .chat-ad-dropdown-toggle[aria-expanded="true"]) {
  transform: none;
}

/* Меню тега в шапке чата («Изменить / Удалить»). */
:is(html, html.dark-theme) body .tag-pill-dropdown {
  gap: 2px;
  min-width: 168px;
}

:is(html, html.dark-theme) body .tag-pill-dropdown .tag-dd-btn {
  width: 100%;
}

:is(html, html.dark-theme) body .tag-pill-dropdown .tag-dd-btn__icon {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ui-text-subdued);
}

:is(html, html.dark-theme) body .tag-pill-dropdown .tag-dd-btn__icon svg {
  width: 16px;
  height: 16px;
}

:is(html, html.dark-theme) body:not(#_) .tag-pill-dropdown .tag-dd-btn.remove,
:is(html, html.dark-theme) body:not(#_) .tag-pill-dropdown .tag-dd-btn.remove .tag-dd-btn__icon {
  color: var(--ui-critical-text);
}

:is(html, html.dark-theme) body:not(#_) .tag-pill-dropdown .tag-dd-btn.remove:is(:hover, :focus-visible) {
  background: var(--ui-critical-surface);
  color: var(--ui-critical-text);
}

@media (prefers-reduced-motion: reduce) {
  :is(html, html.dark-theme) body :is(.crm-context-menu, .crm-dd-menu, .pipeline-dropdown-menu, .chat-ad-dropdown-panel, .tag-pill-dropdown) {
    animation: none;
  }
}

/* --- Выбор даты и времени (ui-datetime.js) ------------------------------
   Вместо системного datetime-local: кнопка как поле нового дизайна и панель
   «календарь + время» в стиле выбора периода. Исходное поле скрыто, но в форме. */
.ui-datetime {
  position: relative;
  display: block;
  width: 100%;
}

.ui-datetime__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ui-datetime__btn {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 11px center / 16px;
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text-subdued);
  font: 450 13.5px/20px var(--ui-font);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

html.dark-theme .ui-datetime__btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ca3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.ui-datetime__btn.has-value {
  color: var(--ui-text);
}

.ui-datetime__btn:hover {
  background-color: var(--ui-surface-hover);
}

.ui-datetime.is-open .ui-datetime__btn,
.ui-datetime__btn:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
}

.ui-datetime__btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.ui-datetime__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-datetime__panel {
  position: fixed;
  z-index: 3100;
  display: grid;
  grid-template-columns: 252px 92px;
  gap: 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  color: var(--ui-text);
  font-family: var(--ui-font);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top left;
  transition: opacity .15s ease, transform .18s var(--ui-ease);
}

.ui-datetime__panel.is-open {
  opacity: 1;
  transform: none;
}

.ui-datetime__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ui-datetime__month {
  color: var(--ui-text-strong);
  font-size: 14px;
  font-weight: 650;
}

.ui-datetime__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  cursor: pointer;
  transition: var(--ui-motion);
}

.ui-datetime__nav:hover:not(:disabled) {
  background: var(--ui-surface-hover);
  transform: var(--ui-lift);
}

.ui-datetime__nav:disabled {
  opacity: .35;
  cursor: default;
}

.ui-datetime__nav svg {
  width: 16px;
  height: 16px;
}

.ui-datetime__nav[data-dt-prev] svg {
  transform: rotate(180deg);
}

.ui-datetime__weekdays,
.ui-datetime__days {
  display: grid;
  grid-template-columns: repeat(7, 36px);
}

.ui-datetime__weekdays span {
  padding: 4px 0;
  color: var(--ui-text-subdued);
  font-size: 12px;
  text-align: center;
}

.ui-datetime__day {
  position: relative;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font: 500 13px/1 var(--ui-font);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.ui-datetime__day:hover:not(:disabled, .is-selected) {
  background: var(--ui-surface-hover);
  transform: scale(1.06);
}

.ui-datetime__day.is-other {
  color: var(--ui-text-disabled);
}

.ui-datetime__day.is-today::after {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateX(-50%);
}

.ui-datetime__day.is-selected {
  background: var(--ui-primary);
  color: var(--ui-primary-text);
  font-weight: 650;
}

.ui-datetime__day:disabled {
  color: var(--ui-text-disabled);
  opacity: .5;
  cursor: not-allowed;
}

.ui-datetime__clock {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  padding-left: 12px;
  border-left: 1px solid var(--ui-divider);
}

.ui-datetime__clock-title {
  margin: 6px 0 8px;
  color: var(--ui-text-strong);
  font-size: 14px;
  font-weight: 650;
}

.ui-datetime__times {
  display: grid;
  align-content: start;
  gap: 2px;
  max-height: 248px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ui-datetime__time {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font: 500 13px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Без scale: список прокручивается, увеличение дало бы горизонтальный скролл. */
.ui-datetime__time:hover:not(:disabled, .is-selected) {
  background: var(--ui-surface-hover);
}

.ui-datetime__time.is-selected {
  background: var(--ui-primary);
  color: var(--ui-primary-text);
  font-weight: 650;
}

.ui-datetime__time:disabled {
  color: var(--ui-text-disabled);
  cursor: not-allowed;
}

.ui-datetime__foot {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-divider);
}

@media (prefers-reduced-motion: reduce) {
  .ui-datetime__panel {
    transition: none;
  }
}

/* Модалки прокручиваются без видимой полосы прокрутки: колесо, тачпад и клавиатура работают как раньше.
   Списки внутри модалок (выпадающие, выбор времени) полосу сохраняют. */
:is(
  .ui-modal,
  .ui-modal__body,
  .modal.show,
  .modal-body,
  .modal-body > form,
  .modal-scroll-body,
  .chat-ad-filter-modal__body
) {
  scrollbar-width: none;
}

:is(
  .ui-modal,
  .ui-modal__body,
  .modal.show,
  .modal-body,
  .modal-body > form,
  .modal-scroll-body,
  .chat-ad-filter-modal__body
)::-webkit-scrollbar {
  display: none;
}

/* Переключатель crm-switch — одного вида во всём приложении: включён — основной тёмный цвет. */
:is(html, html.dark-theme) .crm-switch .crm-switch-slider {
  background: var(--ui-border-strong);
}

:is(html, html.dark-theme) .crm-switch input:checked + .crm-switch-slider {
  background: var(--ui-primary);
}

:is(html, html.dark-theme) .crm-switch input:focus-visible + .crm-switch-slider {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Таблицы старых страниц трекера в .ui-page: шапка как у ui-table — обычный регистр, без разрядки. */
:is(html, html.dark-theme) .ui-page .tt-page table thead th {
  background: var(--ui-surface-subdued);
  color: var(--ui-text-subdued);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Группировки «Статистики» (По дням, По кампаниям…) — как вкладки ui-tabs. */
:is(html, html.dark-theme) .ui-page .tracker-stats-page .stats-tab {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-subdued);
  font: 600 13px/1 var(--ui-font);
  letter-spacing: 0;
  text-transform: none;
  transition: var(--ui-motion);
}

:is(html, html.dark-theme) .ui-page .tracker-stats-page .stats-tab:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
  transform: var(--ui-lift);
}

:is(html, html.dark-theme) .ui-page .tracker-stats-page .stats-tab:is(.active, [aria-selected="true"]) {
  background: var(--ui-surface-selected);
  box-shadow: none;
  color: var(--ui-text-strong);
}

/* Ссылки в таблицах старых страниц — тёмные, подчёркивание при наведении (как в новых списках). */
:is(html, html.dark-theme) .ui-page .tt-page table tbody a:not(.action-btn):not(.ui-btn) {
  color: var(--ui-text-strong);
  text-decoration: none;
}

:is(html, html.dark-theme) .ui-page .tt-page table tbody a:not(.action-btn):not(.ui-btn):hover {
  text-decoration: underline;
}

/* Выбор периода (crm-drp-panel) — общий для всех разделов; перенесено из messenger-ui.css. */
/* --- Выбор периода (crm-drp-panel, переносится в <body>) -------------------
   Тот же календарь на страницах нового дизайна: нейтральный, выбранный период тёмный. */
:is(html, html.dark-theme) body .crm-drp-panel {
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  color: var(--ui-text);
  font-family: var(--ui-font);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-label-row {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Период и быстрые кнопки — одной строкой: кнопки не уезжают вниз под дату. */
@media (min-width: 769px) {
  :is(html, html.dark-theme) body .crm-drp-panel .drp-top-row {
    flex-wrap: nowrap;
  }
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-quick {
  gap: 2px;
  padding: 2px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-neutral-surface);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-quick button {
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text-subdued);
  box-shadow: none;
  font-size: 13px;
  font-weight: 550;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-quick button:hover {
  background: transparent;
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-quick button[aria-pressed="true"],
:is(html, html.dark-theme) body .crm-drp-panel .drp-quick button[aria-pressed="true"]:hover {
  border: 0;
  background: var(--ui-surface);
  color: var(--ui-text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-month-label {
  color: var(--ui-text-strong);
  font-size: 14px;
  font-weight: 650;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 1px 0 var(--ui-btn-edge);
  transition: var(--ui-motion);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-nav-btn:hover {
  background: var(--ui-surface-hover);
  transform: var(--ui-lift);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-weekday {
  color: var(--ui-text-subdued);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day {
  border: 0;
  border-radius: 8px;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day.other {
  color: var(--ui-text-disabled);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

/* Сегодня — точка под числом. */
:is(html, html.dark-theme) body .crm-drp-panel .drp-day[aria-current="date"] {
  position: relative;
  font-weight: 650;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day[aria-current="date"]::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day.in-range {
  border-radius: 0;
  background: var(--ui-surface-selected);
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day:is(.selected-start, .selected-end),
:is(html, html.dark-theme) body .crm-drp-panel .drp-day:is(.selected-start, .selected-end):hover {
  border-radius: 8px;
  background: var(--ui-primary);
  color: var(--ui-primary-text);
}

/* Дни соседнего месяца — только для ориентира: без выделения периода и точки «сегодня». */
:is(html, html.dark-theme) body .crm-drp-panel .drp-day.other,
:is(html, html.dark-theme) body .crm-drp-panel .drp-day.other:is(.in-range, .selected-start, .selected-end),
:is(html, html.dark-theme) body .crm-drp-panel .drp-day.other:is(.in-range, .selected-start, .selected-end):hover {
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text-disabled);
  font-weight: 400;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-day.other[aria-current="date"]::after {
  content: none;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-footer {
  margin-top: 8px;
  padding-top: 12px; /* линия-разделитель не прилипает к кнопкам */
  border-top: 1px solid var(--ui-divider);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions {
  width: 100%;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions button {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 1px 0 var(--ui-btn-edge);
  font-size: 14px;
  font-weight: 600;
  transition: var(--ui-motion);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions button:hover:not(.primary) {
  background: var(--ui-surface-hover);
  transform: var(--ui-lift);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions button.primary {
  border-color: transparent;
  background: var(--ui-primary);
  color: var(--ui-primary-text);
  box-shadow: 0 1px 0 var(--ui-btn-edge-bottom);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions button.primary:hover {
  background: var(--ui-primary-hover);
  transform: var(--ui-lift);
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions button.drp-clear {
  margin-right: auto;
  border-color: transparent;
  background: transparent;
  color: var(--ui-text-subdued);
  box-shadow: none;
}

:is(html, html.dark-theme) body .crm-drp-panel .drp-actions button.drp-clear:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) body .crm-drp-panel button:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
  box-shadow: none;
}

/* Отмеченность видна по галочке; строка подсвечивается только при наведении. */
:is(html, html.dark-theme) body:has(.ui-messenger) .chat-ad-dropdown-panel .chat-ad-dropdown-options li.selected {
  background: transparent;
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) body:has(.ui-messenger) .chat-ad-dropdown-panel .chat-ad-dropdown-options li:hover,
:is(html, html.dark-theme) body:has(.ui-messenger) .chat-ad-dropdown-panel .chat-ad-dropdown-options li.selected:hover {
  background: var(--ui-surface-hover);
}

/* Раскрытый список ровно по ширине своего поля. Скрипт задаёт min-width = ширине поля
   и max-width на 14px больше — список вылезал за край окна фильтров. width: 0 + min-width
   даёт ширину поля; длинные пункты обрезаются многоточием. */
:is(html, html.dark-theme) body:has(.ui-messenger) .crm-dd-menu.portal[style*="min-width"] {
  width: 0 !important;
  box-sizing: border-box;
}


/* Старые «главные» кнопки на страницах .tt-page (зелёная «Создать», фиолетовые «Применить»/«Показать»)
   — как основная кнопка ui-btn. */
:is(html, html.dark-theme) .ui-page .tt-page .action-btn:is(.create-pipeline-btn, .primary-brand, .btn-primary-upload, .btn-green) {
  border: 0;
  background: var(--ui-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .55);
  color: var(--ui-primary-text);
}

:is(html, html.dark-theme) .ui-page .tt-page .action-btn:is(.create-pipeline-btn, .primary-brand, .btn-primary-upload, .btn-green):hover {
  background: var(--ui-primary-hover);
  color: var(--ui-primary-text);
}

/* Свой выбор даты (ui-datetime.js, type=date): в строках фильтров — по содержимому, в полях форм — на всю ширину. */
.ui-datetime:has(> input[type="date"]) {
  display: inline-block;
  width: auto;
  min-width: 156px;
  vertical-align: middle;
}

:is(.ui-field, label, .tt-ui-field, .form-group) > .ui-datetime:has(> input[type="date"]) {
  display: block;
  width: 100%;
}

.ui-datetime__panel--date {
  grid-template-columns: 252px;
}

/* Старые страницы трекера и TikTok Ads внутри .ui-page: фирменный фиолетовый старого дизайна
   (--primary*) заменяется нейтральными токенами — активные вкладки, ссылки, выделения, фокус. */
:is(html, html.dark-theme) .ui-page .tt-page {
  --primary: var(--ui-primary);
  --primary-dark: var(--ui-primary-hover);
  --primary-ink: var(--ui-text-strong);
  --primary-light: var(--ui-surface-selected);
  --primary-border: var(--ui-border-strong);
  --tt-primary: var(--ui-primary);
  --tt-primary-dark: var(--ui-primary-hover);
  --tt-primary-btn: var(--ui-primary);
  --tt-primary-light: var(--ui-surface-selected);
  --tt-primary-border: var(--ui-border-strong);
  --brand: var(--ui-primary);
}

/* Подписи без капса: старые uppercase-лейблы трекера и TikTok Ads — в обычном регистре и читаемого размера. */
:is(html, html.dark-theme) .ui-page .tt-page :is(.form-label, .metric-label, .tt-landing-editor__files-head,
  .tt-creative-eyebrow, .tt-creative-details-list dt, .tt-mail-table th, .tt-ads-eyebrow, .tt-ads-campaign-picker__heading,
  .lead-macros-group, .tt-ads-template-card__facts dt, .tt-ads-job-card__meta, .tt-ads-job-card__facts dt,
  .tt-ads-job-summary dt, .tt-ads-job-step__type, .tt-ads-job-step__body dt, .tt-ads-campaign-card__facts span:first-child,
  .tt-ads-campaign-card__metrics dt, .tt-dup__tree-title) {
  letter-spacing: 0;
  text-transform: none;
}

:is(html, html.dark-theme) .ui-page .tt-page :is(.form-label, .tt-ads-campaign-filters .form-label) {
  color: var(--ui-text-strong);
  font-size: 13px;
  font-weight: 600;
}

:is(html, html.dark-theme) .ui-page .tt-page :is(.metric-label, .tt-creative-details-list dt, .tt-ads-eyebrow,
  .tt-ads-template-card__facts dt, .tt-ads-job-card__meta, .tt-ads-job-card__facts dt, .tt-ads-job-summary dt,
  .tt-ads-job-step__type, .tt-ads-job-step__body dt, .tt-ads-campaign-card__facts span:first-child,
  .tt-ads-campaign-card__metrics dt) {
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 500;
}

/* Прогресс заданий — основной цвет интерфейса вместо фиолетового градиента. */
:is(html, html.dark-theme) .ui-page .tt-page .tt-ads-progress > span {
  background: var(--ui-primary);
}



/* Карточка лида по прямой ссылке (/crm/lead/<id>/): основные поля, полная карточка — панель на доске воронки. */
.ui-page .lead-detail__inner {
  max-width: 760px;
}

.ui-page .lead-detail__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 14px 16px 16px;
}

.ui-page .lead-detail__facts dt {
  margin-bottom: 2px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  font-weight: 500;
}

.ui-page .lead-detail__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ui-text-strong);
  font-size: 13.5px;
  font-weight: 550;
}

.ui-page .lead-detail__facts a {
  color: var(--ui-link);
  text-decoration: none;
}

.ui-page .lead-detail__facts a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .ui-page .lead-detail__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* «Обратная связь» (#feedbackModal): тип в один клик, одно поле с вложениями, контекст страницы.
   Рамку, шапку и футер даёт общий каркас модалок (modal.css). */
#feedbackModal .modal-content.fb-modal {
  width: min(580px, 92vw);
}

:is(html, html.dark-theme) #feedbackModal .fb {
  display: grid;
  gap: 12px;
}

/* Тип: сегменты. */
:is(html, html.dark-theme) #feedbackModal .fb-kinds {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

#feedbackModal .fb-kind {
  position: relative;
  margin: 0;
  cursor: pointer;
}

#feedbackModal .fb-kind input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

:is(html, html.dark-theme) #feedbackModal .fb-kind__body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  color: var(--ui-text-subdued);
  font: 550 13px/1 var(--ui-font);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#feedbackModal .fb-kind__body svg {
  width: 16px;
  height: 16px;
  flex: none;
}

:is(html, html.dark-theme) #feedbackModal .fb-kind:hover .fb-kind__body {
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) #feedbackModal .fb-kind input:checked + .fb-kind__body {
  background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-strong);
}

#feedbackModal .fb-kind--idea input:checked + .fb-kind__body svg { color: #d48806; }
#feedbackModal .fb-kind--bug input:checked + .fb-kind__body svg { color: var(--ui-critical); }
#feedbackModal .fb-kind--complaint input:checked + .fb-kind__body svg { color: #7c5cff; }

#feedbackModal .fb-kind input:focus-visible + .fb-kind__body {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

/* Поле сообщения с вложениями и панелью инструментов — одна рамка, как композер мессенджера. */
:is(html, html.dark-theme) #feedbackModal .fb-compose {
  position: relative;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  transition: box-shadow .15s ease;
}

:is(html, html.dark-theme) #feedbackModal .fb-compose:focus-within {
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
}

:is(html, html.dark-theme) #feedbackModal .fb-compose.is-invalid {
  box-shadow: inset 0 0 0 1px var(--ui-critical), 0 0 0 3px var(--ui-critical-surface);
  animation: fb-shake .32s ease;
}

@keyframes fb-shake {
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

:is(html, html.dark-theme) #feedbackModal .fb-compose__text,
:is(html, html.dark-theme) #feedbackModal .fb-compose__text:focus {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 136px;
  max-height: 46vh;
  margin: 0;
  padding: 12px 14px 6px;
  border: 0 !important;
  border-radius: 12px 12px 0 0;
  background: transparent;
  box-shadow: none !important;
  color: var(--ui-text);
  font: 450 14px/1.55 var(--ui-font);
  outline: none !important;
  resize: vertical;
}

:is(html, html.dark-theme) #feedbackModal .fb-compose__text::placeholder {
  color: var(--ui-text-subdued);
}

:is(html, html.dark-theme) #feedbackModal .fb-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 4px 12px 10px;
  list-style: none;
}

:is(html, html.dark-theme) #feedbackModal .fb-file {
  position: relative;
  display: flex;
  align-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

#feedbackModal .fb-file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(html, html.dark-theme) #feedbackModal .fb-file--video {
  gap: 6px;
  width: auto;
  max-width: 200px;
  padding: 0 30px 0 10px;
  color: var(--ui-text);
  font-size: 12px;
}

#feedbackModal .fb-file--video > svg {
  width: 16px;
  height: 16px;
  flex: none;
}

#feedbackModal .fb-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#feedbackModal .fb-file__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

#feedbackModal .fb-file__remove svg {
  width: 12px;
  height: 12px;
}

#feedbackModal .fb-file:hover .fb-file__remove,
#feedbackModal .fb-file__remove:focus-visible {
  opacity: 1;
}

#feedbackModal .fb-file__remove:hover {
  background: rgba(0, 0, 0, .85);
}

@media (hover: none) {
  #feedbackModal .fb-file__remove { opacity: 1; }
}

:is(html, html.dark-theme) #feedbackModal .fb-compose__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-top: 1px solid var(--ui-divider);
}

:is(html, html.dark-theme) #feedbackModal .fb-tool {
  gap: 6px;
  color: var(--ui-text-subdued);
}

:is(html, html.dark-theme) #feedbackModal .fb-tool:hover {
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) #feedbackModal .fb-compose__hint {
  margin-left: 8px;
  color: var(--ui-text-subdued);
  font-size: 12px;
  white-space: nowrap;
}

:is(html, html.dark-theme) #feedbackModal kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border), inset 0 -1px 0 var(--ui-border-strong);
  color: var(--ui-text);
  font: 550 11px/16px var(--ui-font);
  text-align: center;
}

/* Перетаскивание файлов: подсказка поверх поля. */
:is(html, html.dark-theme) #feedbackModal .fb-drop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--ui-focus);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
  color: var(--ui-focus);
  font: 550 13.5px/1 var(--ui-font);
  pointer-events: none;
}

#feedbackModal .fb-drop svg {
  width: 18px;
  height: 18px;
}

#feedbackModal .fb-compose.is-dragging .fb-drop {
  display: flex;
}

#feedbackModal .fb-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:is(html, html.dark-theme) #feedbackModal .fb-context {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.4;
}

#feedbackModal .fb-context > svg {
  width: 14px;
  height: 14px;
  flex: none;
}

#feedbackModal .fb-context > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(html, html.dark-theme) #feedbackModal .fb-context__page {
  color: var(--ui-text);
}

:is(html, html.dark-theme) #feedbackModal .fb-footer__keys {
  margin-right: auto;
  color: var(--ui-text-subdued);
  font-size: 12px;
  white-space: nowrap;
}

/* Снимок экрана: окно мгновенно прячется, чтобы не попасть в кадр. */
#feedbackModal.fb-capturing,
#feedbackModal.fb-capturing * {
  visibility: hidden !important;
  transition: none !important;
  animation: none !important;
}

@media (hover: none), (max-width: 560px) {
  #feedbackModal .fb-compose__hint,
  #feedbackModal .fb-footer__keys {
    display: none;
  }
}

/* Текст на основном цвете в старых страницах трекера и TikTok Ads: в тёмной теме основной цвет светлый,
   поэтому белый текст старых правил заменяется на --ui-primary-text. */
:is(html, html.dark-theme) .ui-page .tt-page :is(.tt-ads-wizard [aria-current="step"] .tt-ads-wizard__number,
  .tt-ads-plan-card__icon, .tt-ui-tabs a[aria-current="page"] .tt-ui-status) {
  color: var(--ui-primary-text);
}

/* --- «Макросы»: таблица как у «Кампаний» -------------------------------------- */
.crm-macros-table .crm-macro-card {
  cursor: pointer;
}

:is(html, html.dark-theme) .crm-macros-table .crm-macro-card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.crm-macros-table .crm-macro-card:hover .ui-entity__name {
  text-decoration: underline;
}

:is(html, html.dark-theme) .crm-macros-table .crm-macro-alias {
  padding: 1px 6px;
  border: 0;
  box-shadow: none;
  border-radius: 6px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.crm-macros-table .crm-macro-value {
  max-width: 420px;
}

.crm-macros-table .crm-macro-value__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.crm-macros-table .crm-macro-more {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  font-size: 12px;
  font-weight: 600;
  cursor: help;
}

.crm-macros-table .crm-macro-context-count {
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text);
  font: 500 13px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: var(--ui-motion);
}

.crm-macros-table .crm-macro-context-count:hover {
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
  text-decoration: underline;
}

.crm-macros-page #crm-macros-table[hidden],
.crm-macros-page #crm-macros-counter[hidden] {
  display: none;
}

/* Шапка страницы: на широком экране кнопки справа в одну строку, подзаголовок переносится сам. */
@media (min-width: 761px) {
  .ui-page__header {
    flex-wrap: nowrap;
  }

  .ui-page__heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ui-page__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

/* Единый чекбокс (как в .ui-page/.ui-modal) для выпадающих списков в body и окон конструктора автоворонок.
   !important — поверх старых .pipeline-checkbox с фиолетовой заливкой. */
:is(html, html.dark-theme) :is(.crm-dd-menu, body:has(.automation-builder-page) #baseModal) input[type="checkbox"]:not([role="switch"]):not(.crm-switch input) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0 !important;
  border-radius: 5px;
  background: var(--ui-surface) center / 14px no-repeat !important;
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong) !important;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

:is(html, html.dark-theme) :is(.crm-dd-menu, body:has(.automation-builder-page) #baseModal) input[type="checkbox"]:not([role="switch"]):not(.crm-switch input):checked {
  background-color: var(--ui-primary) !important;
  background-image: var(--ui-check-mark) !important;
  box-shadow: inset 0 0 0 1.5px var(--ui-primary) !important;
}

:is(html, html.dark-theme) :is(.crm-dd-menu, body:has(.automation-builder-page) #baseModal) input[type="checkbox"]:not([role="switch"]):not(.crm-switch input):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px;
}

/* Мультивыбор групп (crm-dropdown + tags-filter-menu: конструктор, боты, макросы, управление) —
   как общий выпадающий список select_picker: поиск, пункты с чекбоксом, действия простыми кнопками. */
:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu {
  box-sizing: border-box;
  min-width: 240px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  color: var(--ui-text);
  font-family: var(--ui-font);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-search {
  width: 100%;
  height: 32px;
  margin: 0 0 6px;
  padding: 0 10px;
  border: 0 !important;
  border-radius: 8px;
  background: var(--ui-surface-subdued);
  box-shadow: inset 0 0 0 1px var(--ui-border) !important;
  color: var(--ui-text);
  font: 500 13px/1 var(--ui-font);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .tags-filter-actions {
  display: flex;
  gap: 2px;
  margin: 0 0 4px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--ui-divider);
  background: none;
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .tags-filter-actions .action-btn {
  flex: 0 0 auto;
  width: auto;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-btn-edge), inset 0 -1px 0 var(--ui-btn-edge-bottom);
  color: var(--ui-text);
  font: 600 12.5px/1 var(--ui-font);
  transition: var(--ui-motion);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .tags-filter-actions .action-btn:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
  transform: var(--ui-lift);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-option.mgmt-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font: 500 13px/1.3 var(--ui-font);
  cursor: pointer;
  transition: background-color .12s ease;
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-option.mgmt-opt:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-option.mgmt-opt.selected {
  background: transparent;
  color: var(--ui-text-strong);
  font-weight: 600;
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-option.mgmt-opt.selected:hover {
  background: var(--ui-surface-hover);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-option.mgmt-opt .label {
  color: inherit;
  font: inherit;
}

/* Чекбокс в пункте мультивыбора виден (chat.css прячет его), клик обрабатывает вся строка. */
:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-option.mgmt-opt input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: none;
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-input-clear-btn {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text-subdued);
}

/* Окно подтверждения: абзацы текста; варианты выбора — как ui-choice. Каркас — modal.css. */
:is(html, html.dark-theme) #baseConfirmationModal .modal-body p {
  margin: 0 0 8px;
}

:is(html, html.dark-theme) #baseConfirmationModal .modal-body p:last-child {
  margin-bottom: 0;
}


/* «Переместить автоворонку»: папки — строки выбора, текущая отмечена. */
:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-lead {
  margin: 0 0 12px;
  color: var(--ui-text);
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  list-style: none;
  overflow: hidden;
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list li + li {
  border-top: 1px solid var(--ui-divider);
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-strong);
  font: 550 13.5px/1.3 var(--ui-font);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list__item:hover:not(:disabled) {
  background: var(--ui-surface-hover);
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list__item.is-current {
  background: var(--ui-surface-subdued);
  cursor: default;
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list__icon {
  display: inline-flex;
  color: var(--ui-text-subdued);
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list__icon svg {
  width: 16px;
  height: 16px;
}

:is(html, html.dark-theme) body:has(.automation-builder-page) #baseModal .flows-move-list__current {
  margin-left: auto;
  color: var(--ui-text-subdued);
  font-size: 12px;
  font-weight: 500;
}

:is(html, html.dark-theme) #baseConfirmationModal .ab-confirm-note {
  color: var(--ui-critical-text);
  font-size: 12.5px;
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__lead {
  margin: 0 0 4px;
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__hint {
  margin: 0 0 12px;
  color: var(--ui-text-subdued);
  font-size: 12.5px;
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  cursor: pointer;
  transition: var(--ui-motion);
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__choice:hover {
  background: var(--ui-surface-hover);
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__choice:has(input:checked) {
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1.5px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__choice span {
  display: grid;
  gap: 2px;
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__choice strong {
  color: var(--ui-text-strong);
  font-weight: 650;
}

:is(html, html.dark-theme) #baseConfirmationModal .folder-delete-dialog__choice small {
  color: var(--ui-text-subdued);
  font-size: 12px;
}

:is(html, html.dark-theme) #baseConfirmationModal input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 0 !important;
  border-radius: 50%;
  background: var(--ui-surface) !important;
  box-shadow: inset 0 0 0 1.5px var(--ui-border-strong) !important;
  cursor: pointer;
}

:is(html, html.dark-theme) #baseConfirmationModal input[type="radio"]:checked {
  box-shadow: inset 0 0 0 5.5px var(--ui-primary) !important;
}

/* Сообщения тостов, переданные абзацами (<p>), без лишних отступов. */
.ui-toast__message p {
  margin: 0;
}

.ui-toast__message p + p {
  margin-top: 4px;
}

/* Переключатели crm-switch во всём приложении: плавно меняют цвет подложки и двигают ручку. */
:is(html, html.dark-theme) body .crm-switch .crm-switch-slider {
  transition: background-color .22s ease, box-shadow .22s ease;
}

:is(html, html.dark-theme) body .crm-switch .crm-switch-slider::before {
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), background-color .22s ease, box-shadow .22s ease;
}

:is(html, html.dark-theme) body .crm-switch:hover .crm-switch-slider::before {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
  :is(html, html.dark-theme) body .crm-switch :is(.crm-switch-slider, .crm-switch-slider::before) {
    transition: none;
  }
}


/* Мультивыбор групп: служебные подсказки скрыты, поиск обычного размера, без горизонтальной прокрутки. */
:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu :is(.pipeline-form-dd__hint, [hidden]) {
  display: none !important;
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-clearable {
  position: relative;
  margin: 0 0 6px;
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-search,
:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-search::placeholder {
  font: 450 13px/1.2 var(--ui-font);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-dd-search::placeholder {
  color: var(--ui-text-subdued);
}

:is(html, html.dark-theme) body .crm-dd-menu.tags-filter-menu .crm-clearable .crm-dd-search {
  margin: 0;
}

html body .crm-dd-menu :is(.crm-dd-options, .tags-options) {
  overflow-x: hidden;
}

/* Триггер мультивыбора групп в формах (макросы, боты) — как поле ui: нейтральный во всех состояниях. */
:is(html, html.dark-theme) :is(.crm-macro-group-dd, .bot-admin-groups-mount) .crm-dropdown .crm-dd-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 32px 0 12px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background-color: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  font: 500 13.5px/36px var(--ui-font);
  transform: none;
}

:is(html, html.dark-theme) :is(.crm-macro-group-dd, .bot-admin-groups-mount) .crm-dropdown .crm-dd-btn:is(:hover, :focus-visible) {
  background-color: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  transform: none;
}

:is(html, html.dark-theme) :is(.crm-macro-group-dd, .bot-admin-groups-mount) .crm-dropdown.open .crm-dd-btn {
  background-color: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
  color: var(--ui-text);
}

:is(html, html.dark-theme) :is(.crm-macro-group-dd, .bot-admin-groups-mount) .crm-dropdown .crm-dd-btn .crm-dd-label {
  color: inherit;
  font-weight: 500;
}

/* Поле «Тип» в модалке макроса размечено как ui-field (grid с gap) — выравниваем отступ подписи с остальными полями. */
.crm-macro-modal .crm-macro-field.ui-field {
  display: block;
}

/* Макросы: фиксированные колонки — вкладки и поиск фильтруют строки на клиенте,
   ширины не должны прыгать от того, какие строки видны. */
.crm-macros-table {
  table-layout: fixed;
  min-width: 680px;
}

.crm-macros-table th:nth-child(1) { width: 28%; }
.crm-macros-table th:nth-child(3) { width: 15%; }
.crm-macros-table th:nth-child(4) { width: 116px; }
.crm-macros-table th:nth-child(5) { width: 116px; }
.crm-macros-table th:nth-child(6) { width: 48px; }

.crm-macros-table td {
  overflow-wrap: anywhere;
}

.crm-macros-table .crm-macro-value {
  max-width: none;
}

/* Мультивыбор групп у ботов: закрытое меню убираем совсем — иначе невидимый блок
   оставался поверх строки «Каналы» и перехватывал клики по каналам. */
html body .bot-admin-groups-dd:not(.open) > .crm-dd-menu {
  display: none !important;
}

/* Подписи групп в списках (<optgroup> в select.ui-select, например этапы по воронкам). */
html .ui-dd-menu .crm-dd-group {
  padding: 8px 10px 4px;
  color: var(--ui-text-subdued);
  font: 650 11.5px/1.3 var(--ui-font);
}

html .ui-dd-menu .crm-dd-group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--ui-divider);
  padding-top: 10px;
}

/* Плашка с кнопкой действия справа: иконка, текст и кнопка — по центру по вертикали. */
.ui-banner:has(> .ui-banner__action, > .ui-btn) {
  align-items: center;
}

.ui-banner:has(> .ui-banner__action, > .ui-btn) > svg {
  margin-top: 0;
}

/* --- Панель «Администрирование» (суперпользователь): кнопка-щит в шапке и выезжающий справа список. --- */
.crm-admin-trigger {
  position: relative;
}

.crm-admin-trigger svg {
  width: 17px;
  height: 17px;
}

.crm-admin-trigger__dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px var(--ui-surface);
}

.crm-admin-trigger--floating {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 60;
  box-shadow: var(--ui-shadow-popover);
}

.crm-admin-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, calc(100vw - 24px));
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 16px 0 0 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-modal);
  color: var(--ui-text);
  font-family: var(--ui-font);
}

.crm-admin-drawer::backdrop {
  background: rgba(0, 0, 0, .36);
}

.crm-admin-drawer[open] {
  animation: crm-admin-in .24s var(--ui-ease);
}

.crm-admin-drawer[open]::backdrop {
  animation: ui-fade-in .2s ease;
}

.crm-admin-drawer.is-closing {
  animation: crm-admin-out .18s ease forwards;
}

@keyframes crm-admin-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes crm-admin-out {
  to { transform: translateX(24px); opacity: 0; }
}

.crm-admin-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 12px 20px;
  border-bottom: 1px solid var(--ui-divider);
}

.crm-admin-drawer__title {
  margin: 0;
  color: var(--ui-text-strong);
  font: 700 16px/1.3 var(--ui-font);
}

.crm-admin-drawer__text {
  margin: 4px 0 0;
  color: var(--ui-text-subdued);
  font-size: 13px;
}

.crm-admin-drawer__list {
  display: grid;
  gap: 2px;
  padding: 10px;
}

.crm-admin-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  color: var(--ui-text);
  text-decoration: none;
  transition: var(--ui-motion);
}

.crm-admin-link:hover,
.crm-admin-link:focus-visible {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
  outline: none;
}

.crm-admin-link:focus-visible {
  box-shadow: 0 0 0 2px var(--ui-focus);
}

.crm-admin-link.is-active {
  background: var(--ui-surface-selected);
}

.crm-admin-link__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--ui-neutral-surface);
  color: var(--ui-text-strong);
}

.crm-admin-link__icon svg {
  width: 17px;
  height: 17px;
}

.crm-admin-link__body {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.crm-admin-link__title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-text-strong);
  font: 650 13.5px/1.3 var(--ui-font);
}

.crm-admin-link__text {
  color: var(--ui-text-subdued);
  font-size: 12.5px;
  line-height: 1.35;
}

.crm-admin-link__go {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ui-text-subdued);
}

.crm-admin-link__go svg {
  width: 15px;
  height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .crm-admin-drawer[open],
  .crm-admin-drawer.is-closing {
    animation: none;
  }
}

/* Мессенджер: кнопка «Администрирование» в правом верхнем углу — кнопки шапки чата отступают,
   чтобы не оказаться под ней; высота кнопки как у кнопок шапки. */
body:has(.crm-admin-trigger--floating) .lead-header-actions {
  margin-right: 44px;
}

body:has(.lead-header-actions) .crm-admin-trigger--floating {
  width: 36px;
  height: 36px;
  box-shadow: none;
}

/* Телефон и планшет: верхнюю полосу занимает тёмная шапка с кнопкой меню и закрывает угол.
   Кнопка встаёт в эту шапку справа и выглядит как кнопка меню; шапке чата отступ не нужен. */
@media (max-width: 768px) {
  html body .crm-admin-trigger.crm-admin-trigger--floating {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 12px;
    z-index: 1041;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #2b2b2b;
    color: #fff;
    box-shadow: none;
  }

  html body .crm-admin-trigger.crm-admin-trigger--floating:hover {
    background: #383838;
    color: #fff;
  }

  html body .crm-admin-trigger--floating .crm-admin-trigger__dot {
    box-shadow: 0 0 0 2px #2b2b2b;
  }

  body:has(.crm-admin-trigger--floating) .lead-header-actions {
    margin-right: 0;
  }
}

/* --- Заявки на доступ (раздел платформы) ------------------------------------ */
.access-requests .access-requests__hint {
  margin: 0 0 10px;
  color: var(--ui-text-subdued);
}

.access-requests .access-requests__table .ui-dd {
  min-width: 180px;
}

.access-requests .access-requests__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

.access-requests .access-requests__pages {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Поле «Ссылка» в редакторах текста (ui.js → window.uiLinkPrompt) вместо системного prompt(). */
.ui-link-prompt {
  position: fixed;
  inset: auto;
  z-index: 1000;
  width: 320px;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  color: var(--ui-text);
}

.ui-link-prompt__label {
  display: block;
  margin: 0 0 6px;
  color: var(--ui-text-strong);
  font: 600 13px/18px var(--ui-font);
}

.ui-link-prompt__row {
  display: flex;
  gap: 8px;
}

.ui-link-prompt__row .ui-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
}

.ui-link-prompt__row .ui-btn {
  flex: 0 0 auto;
}

.ui-link-prompt .ui-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--ui-critical-text);
}

.ui-link-prompt__error {
  margin: 6px 0 0;
  color: var(--ui-critical-text);
  font-size: 12.5px;
}

.ui-link-prompt__error[hidden] {
  display: none;
}

/* Одна толщина линии у всех контурных иконок в кнопках и меню: и когда fill="none" стоит не на <svg>,
   а на группе внутри (ракета «Опубликовать» нарисована в 682-px холсте со stroke-width 40). */
:is(.ui-btn, .ui-menu__item, .ui-empty__icon) svg :is(g[stroke]:not([stroke="none"]), g[stroke]:not([stroke="none"]) *) {
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}

/* Редактор сообщений (ui-composer.js), как в «Постинге»: панель оформления внутри поля,
   текст виден оформленным. Селекторы усилены: поле стоит и в старых модалках с их правилами для button. */
html body .ui-composer {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  transition: box-shadow .15s ease;
}

html body .ui-composer:focus-within {
  box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring);
}

html body .ui-composer.is-invalid {
  box-shadow: inset 0 0 0 1px var(--ui-critical);
}

html body .ui-composer.is-disabled {
  opacity: .6;
}

html body .ui-composer__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 6px;
  border-bottom: 1px solid var(--ui-divider);
}

html body .ui-composer__toolbar .ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font: 600 13px/1 var(--ui-font);
}

html body .ui-composer__toolbar .ui-btn:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text-strong);
}

html body .ui-composer__toolbar .ui-composer__tool--glyph {
  justify-content: center;
  width: 28px;
  padding: 0;
  font-size: 13.5px;
}

html body .ui-composer__toolbar svg {
  width: 16px;
  height: 16px;
}

html body .ui-composer__sep {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--ui-divider);
}

html body .ui-composer__text {
  box-sizing: border-box;
  max-height: 420px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 0 0 8px 8px;
  color: var(--ui-text);
  font: 450 13.5px/1.5 var(--ui-font);
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  cursor: text;
}

html body .ui-composer__text:empty::before {
  content: attr(data-placeholder);
  color: var(--ui-text-subdued);
  opacity: .8;
  pointer-events: none;
}

html body .ui-composer__text blockquote {
  margin: 4px 0;
  padding: 0 0 0 10px;
  border-left: 3px solid var(--ui-border-strong);
}

html body .ui-composer__text .tg-spoiler {
  border-radius: 3px;
  background: var(--ui-neutral-surface);
}

html body .ui-composer__text code {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--ui-neutral-surface);
  font: 450 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body .ui-composer__text a {
  color: var(--ui-text-strong);
  text-decoration: underline;
}

/* Чипы макросов под редактором — с отступом от рамки поля. */
html body .ui-composer + textarea + .message-macros {
  margin-top: 8px;
}

html body :is(.ui-field__label, label) + .ui-composer {
  margin-top: 6px;
}

html body .ui-composer__toolbar .ui-btn.is-active {
  background: var(--ui-surface-selected);
  color: var(--ui-text-strong);
}

/* Иконка «Обновить» (ui.js): оборот при клике, повторяется, пока кнопка занята (aria-busy). */
@keyframes ui-refresh-spin {
  to { transform: rotate(360deg); }
}

.ui-icon-refresh {
  transform-origin: 50% 50%;
}

.ui-icon-refresh.is-spinning {
  animation: ui-refresh-spin .6s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ui-icon-refresh.is-spinning {
    animation: none;
  }
}

/* Подразделы пункта меню (crm_section_tabs.html): вкладки под заголовком страницы, справа — площадка «Рекламы».
   Навигация по разделу — вкладки с полоской под выбранной (как LegacyTabs в Shopify Polaris), чтобы не путать
   их с фильтрами-«пилюлями» внутри таблиц. Площадка — сегментный переключатель. */
.crm-section-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--ui-divider);
}

.crm-section-tabs__tabs.ui-tabs {
  flex-wrap: nowrap;
  gap: 24px;
  align-self: stretch;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.crm-section-tabs__tabs.ui-tabs::-webkit-scrollbar {
  display: none;
}

.crm-section-tabs__tabs .ui-tabs__tab {
  position: relative;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 2px;
  border-radius: 0;
  background: none;
  color: var(--ui-text-subdued);
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  transform: none;
}

.crm-section-tabs__tabs .ui-tabs__tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color .15s ease;
}

.crm-section-tabs__tabs .ui-tabs__tab:hover {
  background: none;
  color: var(--ui-text);
  transform: none;
}

.crm-section-tabs__tabs .ui-tabs__tab:hover::after {
  background: var(--ui-border-strong);
}

.crm-section-tabs__tabs .ui-tabs__tab[aria-current="page"] {
  background: none;
  color: var(--ui-text-strong);
}

/* Полоска выбранной вкладки — отдельный элемент: при переходе она переезжает под новую вкладку. */
.crm-section-tabs__tabs .ui-tabs__tab[aria-current="page"]::after {
  background: transparent;
}

.crm-section-tabs__bar {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ui-text-strong);
  view-transition-name: crm-section-tab-bar;
}

.crm-section-tabs__tabs .ui-tabs__tab:focus-visible {
  outline-offset: -2px;
  border-radius: 6px;
}

.crm-section-tabs__platforms {
  display: inline-flex;
  gap: 2px;
  margin: 4px 0 4px auto;
  padding: 3px;
  border-radius: 10px;
  background: var(--ui-neutral-surface);
}

.crm-section-tabs__platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--ui-text-subdued);
  font: 550 13px/1 var(--ui-font);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.crm-section-tabs__platform:hover {
  color: var(--ui-text-strong);
}

.crm-section-tabs__platform {
  position: relative;
  z-index: 0;
}

.crm-section-tabs__platform.is-active {
  color: var(--ui-text-strong);
}

/* Белая плашка выбранной площадки — тоже отдельный элемент: переезжает с TikTok на Meta и обратно. */
.crm-section-tabs__thumb {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 7px;
  background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);
  view-transition-name: crm-platform-thumb;
}

html.dark-theme .crm-section-tabs__thumb {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}

.crm-section-tabs__platform:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.crm-section-tabs__logo,
.crm-section-tabs__logo svg {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.crm-section-tabs__soon {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-text-subdued);
  font-size: 11px;
  font-weight: 600;
}


/* Плавные переходы между страницами (View Transitions): содержимое мягко сменяется, меню остаётся
   на месте, полоска вкладки и плашка площадки переезжают. Браузер без поддержки переходит как раньше. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.crm-sidebar {
  view-transition-name: crm-sidebar;
}

.crm-mobile-header {
  view-transition-name: crm-mobile-header;
}

::view-transition-group(*) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .16s;
}

/* Общая шапка страниц с вкладками (crm_section_header.html) — одинакова на всех вкладках и площадках,
   поэтому при переходе стоит на месте. Стили закреплены: шапка встаёт и на старые страницы (TikTok,
   статистика, партнёрки) со своими правилами для h1 и кнопок. */
.crm-section-header {
  view-transition-name: crm-section-header;
}

html body .crm-section-header h1.ui-page__title {
  margin: 0;
  color: var(--ui-text-strong);
  font: 700 24px/1.2 var(--ui-font);
  letter-spacing: -.02em;
}

html body .crm-section-header .ui-page__subtitle {
  margin: 2px 0 0;
  color: var(--ui-text-subdued);
  font-size: 13px;
}

html body .crm-section-header .ui-page__actions {
  align-items: center;
}

/* Окно «Настройка колонок» (traffic_tracker/js/tt-columns.js: трекер и кампании TikTok): поиск — поле
   ui, строки как пункты списка без лиловой заливки, внизу «По умолчанию» слева, «Отмена» и «Применить» справа. */
html .tt-colpicker__toolbar { gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ui-divider); background: transparent; }
/* Само окно — поверхность ui и в тёмной теме (общий #baseModal там ещё старого синего цвета). */
:is(html, html.dark-theme) #baseModal .modal-content:has(.tt-colpicker) { border-color: var(--ui-divider); background: var(--ui-surface); box-shadow: var(--ui-shadow-modal); }
html .tt-colpicker__toolbar .ui-input {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 1px var(--ui-border-strong);
  color: var(--ui-text);
  font: 450 13px/1.4 var(--ui-font);
}
html .tt-colpicker__toolbar .ui-input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--ui-field-focus), 0 0 0 3px var(--ui-field-ring); }
html .tt-colpicker__all, html .tt-colpicker__label { color: var(--ui-text-strong); font-size: 13.5px; }
html .tt-colpicker__all { font-weight: 600; }
html .tt-colpicker__counter { color: var(--ui-text-subdued); }
html .tt-colpicker__counter.is-full { color: var(--ui-critical-text); }
html .tt-colpicker__list { gap: 0; padding: 6px 4px 6px 0; scrollbar-color: var(--ui-border-strong) transparent; }
html .tt-colpicker__row { min-height: 36px; padding: 4px 8px; border: 0; border-radius: var(--ui-radius-control); }
html .tt-colpicker__row:hover, html .tt-colpicker__row.is-selected:hover { background: var(--ui-surface-hover); }
html .tt-colpicker__row.is-selected { border: 0; background: transparent; }
html .tt-colpicker__row.is-dragging { background: var(--ui-surface-selected); opacity: .7; }
html .tt-colpicker__handle { color: var(--ui-text-subdued); }
html .tt-colpicker .form-check-input { border-color: var(--ui-border-strong); background-color: var(--ui-surface); }
html .tt-colpicker .form-check-input:is(:checked, :indeterminate) { border-color: var(--ui-text-strong); background-color: var(--ui-text-strong); }
html .tt-colpicker .form-check-input:focus { border-color: var(--ui-field-focus); box-shadow: 0 0 0 3px var(--ui-field-ring); }
html .tt-colpicker__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--ui-divider); background: transparent; }
html .tt-colpicker__footer .ui-btn { flex: 0 0 auto; width: auto; margin: 0; }
html .tt-colpicker__footer .tt-colpicker__reset { margin-right: auto; }

/* Статусы трекера и партнёрок (badge-ok / failed / issuing / pending и др.) на ui-badge — одни цвета везде. */
.ui-badge:is(.badge-ok, .badge-success) { background: var(--ui-success-surface); color: var(--ui-success-text); }
.ui-badge:is(.badge-failed, .badge-danger, .badge-error) { background: var(--ui-critical-surface); color: var(--ui-critical-text); }
.ui-badge:is(.badge-issuing, .badge-info, .badge-primary) { background: var(--ui-info-surface); color: var(--ui-info-text); }
.ui-badge:is(.badge-pending, .badge-warning) { background: var(--ui-attention-surface); color: var(--ui-attention-text); }
a.ui-badge { text-decoration: none; }

/* ====================================================================
   Название продукта «lidvanto» — шрифтом логотипа лендинга (Unbounded 700),
   везде, где оно написано рядом со знаком: сайдбар, мобильная шапка, вход.
   Название организации под ним остаётся шрифтом интерфейса.
   ==================================================================== */
@font-face {
  font-family: "Unbounded";
  src: url("../../landing/fonts/unbounded-latin.8616dc355070.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../landing/fonts/unbounded-cyrillic.3a5ed4d11365.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --ui-font-brand: "Unbounded", var(--ui-font);
}

:is(html, html.dark-theme) :is(.crm-sidebar__brand-text, .crm-mobile-brand > span, .tt-mobile-brand > span, .ui-auth__brand > span) {
  /* !important — main.css задаёт шрифт всем элементам через * {… !important}. */
  font-family: var(--ui-font-brand) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* --- Переходы между страницами ------------------------------------------------
   Браузер (Chrome, Edge, Safari 18.2+) плавно сменяет страницу: контент гаснет и проявляется
   с лёгким сдвигом, сайдбар и мобильная шапка стоят на месте. В остальных браузерах — обычный переход. */
@view-transition {
  navigation: auto;
}

.crm-sidebar {
  view-transition-name: crm-sidebar;
}

.crm-mobile-header {
  view-transition-name: crm-mobile-header;
}

::view-transition-old(root) {
  animation: ui-page-out .14s ease-in both;
}

::view-transition-new(root) {
  animation: ui-page-in .22s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ui-page-out {
  to { opacity: 0; }
}

@keyframes ui-page-in {
  from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Новая страница грузится дольше 250 мс — фирменный лоадер поверх области контента (nav-transitions.js). */
.ui-nav-pending {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ui-bg) 55%, transparent);
  pointer-events: none;
  animation: ui-nav-pending-in .18s ease both;
}

@keyframes ui-nav-pending-in {
  from { opacity: 0; }
}

/* Ссылка внутри тоста («Открыть», «Подробнее») — цветом текста тоста, с подчёркиванием. */
.ui-toast__message a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}