/* ===== Дизайн-система макетів довідки (/help/*) =====

   Типи макетів
     UI      — фрагмент інтерфейсу Wepster: панель, редактор, меню, картка коду (.crm …).
     Схема   — таймлайн або діаграма (.tl …).
     Прев'ю  — сайт, телефон чи вікно на сайті, тобто картинка результату (.mockup …).

   1. Геометрія — зі старого скриншота. Розміри, положення, відступи, радіуси й іконки
      задаються в одиницях --u, де 1 одиниця = 1 px старого знімка (панель = 500).
   2. Текст UI — лише токени --fs-* (px на сторінці), розміри тексту зі скриншота не копіюються:
        --fs-cap 12    підписи полів, підказки, лічильники, вкладки, посилання, код
        --fs-txt 13.5  основний текст: поля, опції, повідомлення, кнопки
        --fs-sub 14.5  заголовок секції в панелі (жирний), заголовок вузької панелі
        --fs-ttl 16    заголовок панелі чи картки
      Дрібніше 12 px не буває (на десктопі; на телефоні макет зменшується разом із колонкою,
      але не дрібніше 9 px — ширші макети отримують .help-scroll і гортаються вбік). Рядкові висоти — відносні (1.25–1.5), не в --u.
      Висоти блоків із текстом — min-height, не height: текст більший, ніж на скриншоті.
      Значки в кружечках, бейджі й гліфи ({..}, ?, beta, 0) — це іконки, вони в --u.
      Схема: дрібний текст не менше 9 px. Прев'ю: текст як на скриншоті,
      головне повідомлення (віджет, поп-ап, чат) — не менше 12 px.
   3. Радіуси є завжди. Якщо на скриншоті не видно: панель 9, картка чи спливне вікно 10–14,
      бокс 6, чип 5, поле й кнопка 4 (одиниці).
   4. Іконка + текст — відступ ≈ 0.4em, іконка ніколи не прилипає до тексту.
      Іконки — SVG з images/mockups/icons або ionicons, не розтягнутий растр.
   5. Короткі підписи (вкладки, кнопки, «Увімк», «в 09:00») — в один рядок;
      спливні меню й календарі не закривають сусідній текст.
   6. Картинки не обрізаються й не містять тексту: текст — HTML поверх, щоб його перекладав gtranslate.
      Арт — 2× або SVG.
   7. Мова — глосарій головної (Автоматизатор, Авторозсилка, Лендинг, Поп-ап, Вітальне повідомлення),
      без ВКонтакте.
   8. Перевірка: аркуш «старе | нове» на ширині сторінки 1280 і погляд на 390 px;
      аудит тексту (_scripts/compare/audit.py) — нуль UI-текстів дрібніших за 12 px.
   Технічне: --u на самому .crm не працює (cqw рахується від предка), лише на нащадках;
      <b> у vf.css завжди жирний (!important), для звичайної ваги — <span>. */

.crm {
  /* 1 px тексту на сторінці. Якщо макет вужчий, ніж на десктопі (--u менше за --u0), текст зменшується разом із ним,
     але не більше ніж до 75% (12 px → 9 px) */
  --px: clamp(.75px, calc(var(--u) / var(--u0, .675)), 1px);
  --fs-cap: calc(12 * var(--px));
  --fs-txt: calc(13.5 * var(--px));
  --fs-sub: calc(14.5 * var(--px));
  --fs-ttl: calc(16 * var(--px));
}

/* Мокапи CRM у довідці (/help/support/). Доповнюють style/mockups.css.
   Кожен фрагмент — окремий .crm-контейнер зі своєю шириною макета в --u,
   тому текст масштабується разом із блоком і перекладається разом зі сторінкою. */

.crm.is-list     { --u: calc(100cqw / 470); }
.crm.is-dialog   { --u: calc(100cqw / 827); }
.crm.is-card     { --u: calc(100cqw / 500); }
.crm.is-manage   { --u: calc(100cqw / 720); }
.crm.is-groups   { --u: calc(100cqw / 1400); }
.crm.is-compose  { --u: calc(100cqw / 640); }

/* Рамка фрагмента: тут задається базовий шрифт, бо cqw рахується від .crm */
.crm-frame {
  position: relative;
  overflow: hidden;
  font-size: min(calc(21 * var(--u) * var(--tk, 1)), max(calc(21 * var(--u)), 12px));
  background: #fff;
}

/* Обрізаний низ, як у скриншотах */
.crm-fade {
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}

.crm.is-list .crm-list {
  height: calc(var(--h, 439) * var(--u));
  border-right: 0;
}

.crm-title-icon.has-dot {
  position: relative;
}

.crm-title-icon.has-dot::after {
  content: '';
  position: absolute;
  top: calc(-5 * var(--u));
  right: calc(-5 * var(--u));
  width: calc(12 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3f7fe0;
}

.crm-tabs.is-wide span:not(.crm-search) {
  flex: 1;
}

.crm-item.is-new {
  margin: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  border-radius: calc(8 * var(--u));
  background: #e4f3fc;
}

/* Розмічений рядок чату */
.crm-anno {
  height: calc(345 * var(--u));
  background: #fff;
}

.crm-anno .crm-item {
  position: absolute;
  top: calc(128 * var(--u));
  left: calc(8 * var(--u));
  right: calc(8 * var(--u));
  border: 0;
  border-radius: calc(16 * var(--u));
}

.crm-anno-label {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  margin: 0;
  font-size: min(calc(14 * var(--u) * var(--tk, 1)), max(calc(14 * var(--u)), 12px));
  line-height: 1.25;
  color: #666;
}

.crm-anno-label.is-right {
  left: auto;
  right: calc((470 - var(--x)) * var(--u));
  text-align: right;
}

.crm-anno-line {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  height: calc(var(--h) * var(--u));
  border-left: 1px solid #aaa;
}

/* Вікно чату окремо */
.crm.is-dialog .crm-dialog {
  height: calc(var(--h, 1100) * var(--u));
  font-size: min(calc(21 * var(--u) * var(--tk, 1)), max(calc(21 * var(--u)), 12px));
}

.crm.is-dialog .crm-dialog.is-short .crm-messages {
  flex: 0 0 calc(var(--gap, 60) * var(--u));
  padding: 0;
}

.crm.is-dialog .crm-dialog.is-composer {
  justify-content: center;
  padding-top: calc(24 * var(--u));
}

.crm.is-compose .crm-composer-input {
  padding: calc(18 * var(--u)) calc(24 * var(--u));
}

.crm.is-compose .crm-tools {
  padding-bottom: calc(12 * var(--u));
}

.crm-take {
  padding: calc(9 * var(--u)) calc(20 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #fcc21b;
  color: #000;
  font-size: min(calc(20 * var(--u) * var(--tk, 1)), max(calc(20 * var(--u)), 12px));
}

.crm-owner.is-empty .crm-badge {
  border: 1px solid #c9d3da;
  background: #fff;
}

.crm-composer.is-note {
  background: #fdf3b3;
}

.crm-composer.is-note .crm-composer-input i {
  color: #b5452b;
}

.crm-tools.is-caption {
  justify-content: center;
}

.crm-tools.is-caption small {
  margin: 0;
  font-size: min(calc(18 * var(--u) * var(--tk, 1)), max(calc(18 * var(--u)), 12px));
  color: #333;
}

/* Попап керування чатом: групи й учасники */
.crm-manage {
  display: grid;
  grid-template-columns: calc(380 * var(--u)) 1fr;
  height: calc(378 * var(--u));
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

.crm-manage-groups {
  padding: calc(24 * var(--u)) calc(36 * var(--u)) 0 calc(24 * var(--u));
  border-right: 1px solid #eee;
}

.crm-manage-head {
  margin-bottom: calc(14 * var(--u));
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
  color: #999;
}

.crm-manage-row {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-height: calc(52 * var(--u));
}

.crm-manage-row > :last-child:not(:first-child) {
  margin-left: auto;
}

.crm-manage-people {
  padding: calc(24 * var(--u)) calc(26 * var(--u)) 0;
}

.crm-manage-people .crm-manage-row {
  min-height: calc(68 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 0;
}

.crm-manage-people .crm-manage-row.is-owner {
  border-radius: calc(34 * var(--u));
  background: #efefef;
}

.crm-manage-people img,
.crm-manage-people .crm-badge {
  width: calc(52 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.crm-manage-people .crm-badge.is-light {
  border: calc(2 * var(--u)) solid #ddd;
  background: #fff;
  color: #000;
}

.crm-manage-actions {
  display: flex;
  gap: calc(26 * var(--u));
  font-size: min(calc(28 * var(--u) * var(--tk, 1)), max(calc(28 * var(--u)), 12px));
}

.crm-manage .is-green {
  color: #2aa741;
}

/* Групи та відділи: панель груп + список + вікно чату */
.crm-groups {
  display: grid;
  grid-template-columns: calc(300 * var(--u)) calc(497 * var(--u)) 1fr;
  height: calc(656 * var(--u));
}

.crm-groups-panel {
  padding: calc(24 * var(--u)) 0;
  background: #3b3b3b;
  color: #fff;
}

.crm-groups-panel .crm-manage-row {
  min-height: calc(76 * var(--u));
  padding: 0 calc(28 * var(--u));
}

.crm-groups-panel .crm-groups-title {
  margin-bottom: calc(10 * var(--u));
  font-size: min(calc(30 * var(--u) * var(--tk, 1)), max(calc(30 * var(--u)), 12px));
  font-weight: 700;
}

.crm-groups-panel small {
  display: block;
  font-size: min(calc(16 * var(--u) * var(--tk, 1)), max(calc(16 * var(--u)), 12px));
  color: #999;
}

.crm-groups-panel .is-active {
  background: #555;
}

.crm-groups .crm-list {
  border-right: 1px solid #e6e6e6;
}

.crm-groups .crm-dialog {
  background: #e8e8ea;
}

.crm-groups .crm-dialog-head {
  background: #f2f2f3;
}

.crm-groups .crm-messages {
  gap: calc(6 * var(--u));
}

.crm-groups .crm-note b {
  color: #333;
}

/* Картка клієнта окремо */
.crm.is-card .crm-card {
  width: 100%;
  height: auto;
  padding-bottom: calc(130 * var(--u));
}

.crm-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(-8 * var(--u)) 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid #ccc;
  border-radius: calc(6 * var(--u));
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
}

.crm-label {
  margin: calc(34 * var(--u)) 0 calc(12 * var(--u));
  font-size: min(calc(23 * var(--u) * var(--tk, 1)), max(calc(23 * var(--u)), 12px));
}

.crm-textarea {
  min-height: calc(100 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid #ccc;
  border-radius: calc(4 * var(--u));
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
  line-height: 1.6;
}

.crm-textarea.is-empty {
  font-style: italic;
  color: #999;
}

.crm-tool {
  display: grid;
  grid-template-columns: calc(64 * var(--u)) 1fr auto;
  align-items: center;
  column-gap: calc(18 * var(--u));
  margin-bottom: calc(12 * var(--u));
  font-size: min(calc(21 * var(--u) * var(--tk, 1)), max(calc(21 * var(--u)), 12px));
  line-height: 1.2;
}

.crm-tool small {
  display: block;
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
  color: #999;
}

.crm-tool-icon {
  display: grid;
  place-items: center;
  height: calc(54 * var(--u));
  border: 1px solid #ccc;
  border-radius: calc(4 * var(--u));
  font-size: min(calc(30 * var(--u) * var(--tk, 1)), max(calc(30 * var(--u)), 12px));
}

.crm-tool-icon.is-dark {
  border-color: #000;
  background: #000;
  color: #fff;
}

.crm-tool > i {
  align-self: start;
  color: #ccc;
}

.crm-utm {
  margin: calc(8 * var(--u)) 0 0;
  font-size: min(calc(23 * var(--u) * var(--tk, 1)), max(calc(23 * var(--u)), 12px));
  line-height: 1.4;
}

.crm-utm span {
  font-size: min(calc(18 * var(--u) * var(--tk, 1)), max(calc(18 * var(--u)), 12px));
  word-break: break-all;
}

.crm-utm small {
  display: block;
  margin-top: calc(14 * var(--u));
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
  color: #bbb;
}

.crm-utm dd {
  margin: 0 0 0 calc(28 * var(--u));
}

.crm-gid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(14 * var(--u));
  padding: calc(18 * var(--u)) calc(32 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #3d3d3d;
  color: #fff;
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

/* ===== «Інструменти залучення клієнтів» (/help/tools/) ===== */

/* Знімки сайту з телефоном: 1350×770 */
.mockup.is-phone {
  --dw: 1350;
  --dh: 770;
}

/* Панель налаштувань інструмента. --dw — ширина знімка, --pw — ширина панелі (в одиницях --u).
   Одиниця — піксель старого знімка, де панель має ширину 500: розміри зняті зі старих скриншотів */
.crm.is-tp {
  --u: calc(100cqw / var(--dw, 800));
  position: relative;
}

.tp {
  width: calc(var(--pw, 500) * var(--u));
  overflow: hidden;
  border-radius: calc(9 * var(--u));
  background: #e8e8ed;
  font-size: var(--fs-txt);
  line-height: 1.3;
  color: #111;
}

.tp i,
.tp-float i {
  font-style: normal;
}

.tp-head {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(61 * var(--u));
  padding: 0 calc(39 * var(--u));
  border-bottom: 1px solid #d6d6dc;
  font-size: var(--fs-ttl);
}

.tp-head b {
  flex: 1;
  font-weight: 600;
}

.tp-head i {
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

.tp-body {
  padding: calc(20 * var(--u)) calc(39 * var(--u)) calc(24 * var(--u));
}

.tp-tabs {
  display: flex;
  height: calc(37 * var(--u));
  overflow: hidden;
  border: calc(1.6 * var(--u)) solid #444;
  border-radius: calc(4 * var(--u));
  font-size: var(--fs-cap);
}

.tp-tabs span {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(8 * var(--u));
  white-space: nowrap;
}

.tp-tabs span + span {
  border-left: 1px solid #444;
}

.tp-tabs .is-active {
  background: #3d3d3d;
  color: #fff;
}

/* Новіший вигляд панелі (блок, кнопки): вужчі поля, менший заголовок, плоскі вкладки */
.tp.is-v2 .tp-head {
  height: calc(62 * var(--u));
  padding: 0 calc(31 * var(--u));
  border: 0;
  font-size: var(--fs-sub);
}

.tp.is-v2 .tp-body,
.tp.is-v2 .tp-foot {
  padding-inline: calc(31 * var(--u));
}

/* Плоскі вкладки на всю ширину (блок, кнопки) */
.tp-tabs.is-flat {
  height: calc(35 * var(--u));
  margin: calc(-20 * var(--u)) calc(-31 * var(--u)) 0;
  border: 0;
  border-radius: 0;
  background: #c5c4c9;
}

.tp-tabs.is-flat .is-active {
  background: #2c2c2c;
}

.tp-tabs.is-flat span + span {
  border: 0;
}

.tp .is-green,
.tp-float .is-green {
  color: #2aa741;
}

.tp-label {
  display: flex;
  justify-content: space-between;
  margin: calc(18 * var(--u)) 0 calc(8 * var(--u));
  font-size: var(--fs-cap);
  color: #949494;
}

.tp-tabs + .tp-label {
  margin-top: calc(31 * var(--u));
}

.tp-h {
  margin: calc(40 * var(--u)) 0 calc(11 * var(--u));
  font-size: var(--fs-sub);
  font-weight: 700;
}

.tp-tabs + .tp-h {
  margin-top: calc(33 * var(--u));
}

.tp-h + .tp-label {
  margin-top: calc(8 * var(--u));
}

.tp-p {
  margin: 0 0 calc(14 * var(--u));
  font-size: var(--fs-txt);
}

.tp-p.is-muted {
  margin-bottom: calc(8 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.2;
  color: #949494;
}

.tp-h + .tp-p {
  margin-top: calc(-4 * var(--u));
}

.tp-box {
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  background: #fff;
}

.tp-text {
  min-height: calc(67 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 1px solid #c9c9cf;
  border-radius: calc(4 * var(--u));
  background: #fff;
  font-size: var(--fs-txt);
  line-height: 1.25;
}

.tp-text.is-tall {
  min-height: calc(111 * var(--u));
}

.tp.is-v2 .tp-text {
  min-height: calc(73 * var(--u));
  padding: calc(12 * var(--u));
}

.tp.is-v2 .tp-text.is-tall {
  min-height: calc(124 * var(--u));
}

.tp-text.is-empty {
  font-style: italic;
  color: #888;
}

.tp-img {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  height: calc(var(--h, 213) * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fff;
}

.tp-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Хрестик «видалити картинку»: білий квадрат у правому верхньому куті */
.tp-x {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  aspect-ratio: 1;
  border-bottom-left-radius: calc(4 * var(--u));
  background: #fff;
}

.tp-x::before,
.tp-x::after {
  content: '';
  grid-area: 1 / 1;
  width: calc(15 * var(--u));
  height: calc(2 * var(--u));
  background: #111;
  transform: rotate(45deg);
}

.tp-x::after {
  transform: rotate(-45deg);
}

.tp-emoji {
  font-size: min(calc(110 * var(--u) * var(--tk, 1)), max(calc(110 * var(--u)), 12px));
  line-height: 1;
}

.tp-box > .tp-ch:first-child {
  margin-top: calc(4 * var(--u));
}

.tp-box > .tp-ch:last-child {
  margin-bottom: calc(4 * var(--u));
}

.tp-ch {
  display: grid;
  grid-template-columns: calc(40 * var(--u)) calc(21 * var(--u)) 1fr auto;
  align-items: center;
  column-gap: calc(10 * var(--u));
  min-height: calc(53 * var(--u));
  padding: 0 calc(12 * var(--u));
}

.tp-ch img {
  width: calc(38 * var(--u));
}

.tp-ch .tp-radio {
  margin-left: calc(4 * var(--u));
}

.tp-radio {
  flex: none;
  width: calc(20 * var(--u));
  aspect-ratio: 1;
  border: calc(6 * var(--u)) solid #5b7fd6;
  border-radius: 50%;
  background: #fff;
}

.tp-radio.is-off {
  border: calc(1.6 * var(--u)) solid #333;
}

.tp-link {
  font-size: var(--fs-cap);
  color: #4a76d4;
}

.tp-note {
  margin: calc(31 * var(--u)) 0 0;
  font-size: var(--fs-cap);
  text-align: center;
  color: #a0a0a4;
}

/* Після ланцюжка автоповідомлень підказка ближче до рамки */
.tp-box:has(.tp-chat) + .tp-note {
  margin-top: calc(19 * var(--u));
}

.tp-foot {
  display: flex;
  justify-content: space-between;
  padding: calc(13 * var(--u)) calc(39 * var(--u));
  border-top: 1px solid #d6d6dc;
}

.tp-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(51 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: calc(1.6 * var(--u)) solid #444;
  border-radius: calc(4 * var(--u));
  font-size: var(--fs-txt);
}

.tp-btn.is-dark {
  border-color: #3d3d3d;
  background: #3d3d3d;
  color: #fff;
}

.tp-btn.is-green {
  border-color: #2aa741;
  background: #2aa741;
  color: #fff;
}

.tp-btn.is-blue {
  height: calc(49 * var(--u));
  border-color: #5a86d6;
  background: #5a86d6;
  color: #fff;
  font-size: var(--fs-txt);
}

/* Палітра кольорів */
.tp-palette {
  display: flex;
  overflow: hidden;
  height: calc(48 * var(--u));
  border-radius: calc(6 * var(--u));
}

.tp-palette i {
  display: grid;
  flex: 1;
  place-items: center;
  background: var(--c);
}

.tp-palette i.is-on::after {
  content: '';
  width: calc(12 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
}

.tp-palette i.is-on.is-dot-light::after {
  background: #fff;
}

.tp-palette.is-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  height: auto;
}

.tp-palette.is-grid i {
  aspect-ratio: 1 / .9;
}

.tp-palette.is-grid i.is-on::after {
  width: 40%;
}

.tp-opt {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(45 * var(--u));
  padding: calc(4 * var(--u)) calc(13 * var(--u));
}

/* Розділювачі лише під першими рядками (прапорець і затримка), з відступами від країв */
.tp-opt.is-ruled {
  border-bottom: 1px solid #e2e2e2;
  margin: 0 calc(13 * var(--u));
  padding-inline: 0;
}

.tp-opt.is-ruled + .tp-opt.is-ruled {
  min-height: calc(56 * var(--u));
}

/* Рядок із поясненням: перемикач стоїть на рівні заголовка */
.tp-opt.is-multi {
  align-items: flex-start;
  padding-block: calc(7 * var(--u));
}

.tp-opt.is-multi .tp-radio {
  margin-top: calc(1 * var(--u));
}

.tp-opt.is-split {
  justify-content: space-between;
}

.tp-opt small {
  display: block;
  font-size: var(--fs-cap);
  line-height: 1.25;
  color: #9a9a9a;
}

.tp-check {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(21 * var(--u));
  aspect-ratio: 1;
  border-radius: calc(4 * var(--u));
  background: #5b7fd6;
  color: #fff;
  font-size: min(calc(15 * var(--u) * var(--tk, 1)), max(calc(15 * var(--u)), 12px));
}

.tp-num {
  display: grid;
  place-items: center;
  min-width: calc(48 * var(--u));
  height: calc(33 * var(--u));
  border: 1px solid #d4d4d4;
  border-radius: calc(4 * var(--u));
}

/* Кнопка віджета: біла «хмарка» з очима й хвостиком (69×58) */
.tp-wbtn {
  display: inline-block;
  flex: none;
  width: calc(69 * var(--u));
  height: calc(58 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 58'%3E%3Cpath d='M24 1h20a23 23 0 0 1 23 23v29c0 4-3 5-6 3l-9-8H24A23 23 0 0 1 1 25v-1A23 23 0 0 1 24 1z' fill='%23fff'/%3E%3Ccircle cx='24' cy='25' r='5.5'/%3E%3Ccircle cx='42' cy='25' r='5.5'/%3E%3Cpath d='M47 46q5 1 8-3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, .2));
}

/* У рядку «Анімація» кнопка вистрибує над рамкою */
.tp-box.tp-opt {
  overflow: visible;
}

.tp-opt .tp-wbtn {
  margin: calc(-34 * var(--u)) calc(17 * var(--u)) 0 0;
}

.tp-tip {
  position: relative;
  min-height: calc(111 * var(--u));
  padding: calc(19 * var(--u)) calc(15 * var(--u));
}

.tp-tip span {
  display: inline-flex;
  align-items: center;
  width: calc(332 * var(--u));
  height: calc(43 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(22 * var(--u));
  background: #000;
  color: #fff;
  font-size: var(--fs-txt);
}

.tp-tip .tp-wbtn {
  position: absolute;
  top: calc(35 * var(--u));
  left: calc(328 * var(--u));
}

/* Ланцюжок автоповідомлень */
.tp-h + .tp-box {
  margin-top: calc(13 * var(--u));
}

.tp-select {
  display: grid;
  grid-template-columns: calc(34 * var(--u)) 1fr;
  align-items: center;
  gap: calc(13 * var(--u));
  padding: calc(13 * var(--u)) calc(13 * var(--u));
  border-bottom: 1px solid #e6e6e6;
}

.tp-select > i {
  font-size: min(calc(36 * var(--u) * var(--tk, 1)), max(calc(36 * var(--u)), 12px));
}

.tp-select > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(46 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 1px solid #c9c9cf;
  border-radius: calc(4 * var(--u));
  font-size: var(--fs-txt);
}

.tp-chat {
  padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u));
  font-size: var(--fs-txt);
  line-height: 1.28;
  text-align: center;
}

.tp-chat-title {
  font-size: var(--fs-cap);
  line-height: 1.3;
  color: #999;
}

.tp-chat-title small {
  display: block;
  font-size: var(--fs-cap);
  font-style: italic;
}

.tp-msg {
  position: relative;
  width: fit-content;
  max-width: calc(277 * var(--u));
  margin: calc(12 * var(--u)) 0 0 calc(34 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #eee;
  text-align: left;
}

.tp-msg::before {
  content: '';
  position: absolute;
  left: calc(-37 * var(--u));
  bottom: 0;
  width: calc(25 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eee;
}

.tp-msg p {
  margin: 0;
}

.tp-msg p + p {
  margin-top: calc(14 * var(--u));
}

.tp-msg:has(.tp-msg-btn) {
  padding-bottom: 0;
  outline: 1px solid #e3e3e3;
  outline-offset: -1px;
}

.tp-msg-btn:last-child {
  border-radius: 0 0 calc(12 * var(--u)) calc(12 * var(--u));
}

/* Кнопки під повідомленням: білі рядки на всю ширину бульбашки */
.tp-msg-btn {
  display: grid;
  place-items: center;
  min-height: calc(45 * var(--u));
  margin: 0 calc(-10 * var(--u));
  border-top: 1px solid #e3e3e3;
  background: #fff;
  color: #4a76d4;
}

.tp-msg p + .tp-msg-btn {
  margin-top: calc(8 * var(--u));
}

.tp-date {
  margin: calc(16 * var(--u)) 0 0;
  font-size: var(--fs-cap);
  color: #999;
}

/* Плаваючі прев'ю поверх панелі */
.tp-float {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}

.tp-card {
  overflow: hidden;
  border-radius: calc(14 * var(--u));
  background: #fff;
  box-shadow: 0 calc(16 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .2);
  text-align: center;
}

.tp-card-text {
  margin: calc(38 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u));
  font-size: var(--fs-txt);
  line-height: 1.33;
}

.tp-card .mockup-divider {
  margin: 0 0 calc(24 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.3;
  color: #777;
}

.tp-icons {
  display: flex;
  justify-content: center;
  gap: calc(var(--gap, 22) * var(--u));
}

.tp-icons img {
  width: calc(var(--size, 56) * var(--u));
}

.tp-card small {
  display: block;
  margin: calc(30 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  font-size: var(--fs-cap);
  color: #888;
}

.tp-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(var(--s, 40) * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .16);
}

/* Тонкий хрестик закриття, як у старому знімку */
.tp-close::before,
.tp-close::after {
  content: '';
  grid-area: 1 / 1;
  width: 50%;
  height: calc(2.6 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #222;
  transform: rotate(45deg);
}

.tp-close::after {
  transform: rotate(-45deg);
}

.tp-checker {
  display: grid;
  place-items: center;
  padding: calc(38 * var(--u)) 0;
  background: repeating-conic-gradient(#e2e2e2 0 25%, #fff 0 50%) 0 0 / calc(14 * var(--u)) calc(14 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .2);
}

/* Промо-картинка «Ранній список» 462×312 */
.mockup.is-early {
  --dw: 462;
  --dh: 312;
}

.mockup.is-early {
  text-align: left;
}

.mockup.is-early p {
  line-height: 1.3;
  color: #fff;
}

.mockup.is-early .mockup-bold {
  line-height: 1.25;
}

.mockup.is-early .is-yellow {
  color: #f5ec9a;
}

.mockup.is-early em {
  padding: 0 .1em;
  border-radius: .15em;
  background: #c8372d;
  font-style: normal;
}

.mockup.is-early s {
  margin-left: .25em;
  font-size: .7em;
  font-weight: 500;
  color: #ddd;
}

/* Прев'ю блоку: жовта плитка 424×665 з картинкою-квадратом угорі */
.tp-tile {
  overflow: hidden;
  padding-bottom: calc(36 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #ffea00;
  box-shadow: 0 calc(16 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .22);
  text-align: center;
}

.tp-tile > img {
  display: block;
  width: 100%;
}

.tp-tile-title {
  margin: calc(32 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u));
  font-size: var(--fs-txt);
  line-height: 1.3;
  color: #111;
}

.tp-tile .mockup-divider {
  margin: 0 0 calc(26 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.25;
  color: #555;
}

.tp-tile .mockup-divider span {
  max-width: calc(330 * var(--u));
}

/* Жовта плитка блоку 276×402 */
.mockup.is-tile {
  --dw: 276;
  --dh: 402;
}

/* Ярлик SALE 660×426 */
.mockup.is-sale {
  --dw: 660;
  --dh: 426;
}

.mockup.is-sale p {
  white-space: nowrap;
  color: #c4c4c4;
}

.mockup.is-sale span {
  color: #dcdcdc;
}

/* Код встановлення: картки 692 px завширшки, одиниця — піксель старого знімка */
.tp-code-card {
  padding: calc(48 * var(--u)) calc(52 * var(--u));
  background: #fff;
  font-size: var(--fs-txt);
  line-height: 1.29;
  color: #111;
}

.tp-code-card h5 {
  margin: 0;
  font-size: var(--fs-ttl);
  font-weight: 700;
  line-height: 1.3;
}

.tp-code-card p {
  margin: calc(24 * var(--u)) 0 0;
}

.tp-code-card h5 + p {
  margin-top: 0;
}

.tp-code-card .is-muted {
  font-size: var(--fs-cap);
  line-height: 1.1;
  color: #a3a3a3;
}

.tp-code-card .tp-pre + p {
  margin-top: calc(22 * var(--u));
}

.tp-code-card .tp-pre + .is-muted,
.tp-code-card p + .is-muted {
  margin-top: calc(10 * var(--u));
}

.tp-code-card p + h5 {
  margin-top: calc(40 * var(--u));
}

/* «Приклад:» — дрібніше, рядок коду обрізається праворуч */
.tp-code-card .tp-example {
  margin-top: calc(14 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.1;
}

.tp-code-card .tp-example code {
  display: block;
  overflow: hidden;
  font-family: inherit;
  white-space: nowrap;
}

.tp-pre {
  position: relative;
  margin: calc(12 * var(--u)) 0 0;
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: 1px solid #d0d0d0;
  border-radius: calc(4 * var(--u));
  background: #efefef;
  font-family: inherit;
  font-size: var(--fs-cap);
  line-height: 1.47;
  white-space: pre-wrap;
  word-break: break-word;
  color: #111;
}

.tp-pre code {
  font-family: inherit;
}

.tp-pre:has(.tp-btn) {
  padding-bottom: calc(72 * var(--u));
}

.tp-pre .tp-btn {
  position: absolute;
  right: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  height: calc(52 * var(--u));
  font-size: var(--fs-cap);
}

.tp-url {
  display: flex;
  align-items: center;
  height: calc(78 * var(--u));
  margin-top: calc(26 * var(--u));
  padding: calc(8 * var(--u));
  border: 1px solid #d0d0d0;
  border-radius: calc(4 * var(--u));
  background: #efefef;
}

.tp-url span {
  flex: 1;
  overflow: hidden;
  padding: 0 calc(10 * var(--u));
  white-space: nowrap;
}

.tp-url b {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: 100%;
  padding: 0 calc(16 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #333;
  color: #fff;
  font-size: var(--fs-cap);
  font-weight: 400;
}

.tp-url + .is-muted {
  margin-top: calc(22 * var(--u));
}

.tp-code-card .tp-utm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(16 * var(--u));
}

.tp-help {
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  aspect-ratio: 1;
  border: calc(2 * var(--u)) solid #222;
  border-radius: 50%;
  font-size: min(calc(24 * var(--u) * var(--tk, 1)), max(calc(24 * var(--u)), 12px));
  line-height: 1;
}

.tp-opt > span {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.tp-opt.is-multi > span {
  align-items: flex-start;
}

.tp-card .tp-emoji {
  margin: calc(58 * var(--u)) 0 calc(14 * var(--u));
  font-size: min(calc(120 * var(--u) * var(--tk, 1)), max(calc(120 * var(--u)), 12px));
}

.tp-img-fill {
  align-self: start;
  width: 100%;
}

/* ===== Прев'ю на сайті (/help/tools/): розміри зі старих скриншотів, головна сторінка не змінюється ===== */
.mockup .mockup-black {
  color: #111;
}

.mockup .mockup-dark {
  color: #222;
}

.mockup .mockup-olive {
  color: #5c5820;
}

.mockup .mockup-lh {
  line-height: 1.33;
}

/* Іконки месенджерів у білих квадратиках (лендинг XL) */
.mockup-app-icons {
  display: flex;
  gap: calc(var(--gap) * var(--u));
}

.mockup-app-icons span {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--s) * var(--u));
  aspect-ratio: 1;
  border-radius: calc(var(--s) * .2 * var(--u));
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25);
}

.mockup-app-icons img {
  width: 72%;
}

/* Віджет на сайті */
.mockup-widget {
  padding-top: calc(52 * var(--u));
}

.mockup-widget-emoji {
  margin-bottom: calc(58 * var(--u));
  font-size: min(calc(132 * var(--u) * var(--tk, 1)), max(calc(132 * var(--u)), 12px));
}

.mockup-widget-text {
  margin-bottom: calc(14 * var(--u));
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
  line-height: 1.53;
  color: #333;
}

.mockup-widget .mockup-divider {
  margin-bottom: calc(20 * var(--u));
  font-size: min(calc(16.5 * var(--u) * var(--tk, 1)), max(calc(16.5 * var(--u)), 12px));
}

.mockup-widget .mockup-icons {
  --gap: 28;
}

.mockup-widget-close::before,
.mockup-widget-close::after {
  left: 25%;
  right: 25%;
  height: calc(2 * var(--u));
  background: #222;
}

/* Поп-ап на сайті: текст трохи більший */
.mockup-popup-text {
  margin: calc(27 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
  font-weight: 600;
}

.mockup-popup .mockup-divider {
  margin-bottom: calc(27 * var(--u));
  font-size: min(calc(13.5 * var(--u) * var(--tk, 1)), max(calc(13.5 * var(--u)), 12px));
}

.mockup-popup .mockup-icons {
  --size: 45;
  --gap: 19.5;
}

/* ===== «Автоматизатор» (/help/automator/) ===== */

/* Таймлайн автоповідомлень 1600×580: дати, пунктирні колонки, рядки підписників */
.crm.is-tl {
  --u: calc(100cqw / 1600);
}

.tl {
  position: relative;
  height: calc(580 * var(--u));
  background: #fff;
}

.tl > * {
  position: absolute;
}

.tl-date {
  top: calc(46 * var(--u));
  left: calc((var(--x) - 80) * var(--u));
  width: calc(160 * var(--u));
  font-size: min(calc(29 * var(--u) * var(--tk, 1)), max(calc(29 * var(--u)), 12px));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #b8b8b8;
}

.tl-dots {
  top: calc(101 * var(--u));
  left: calc((var(--x) - 1) * var(--u));
  width: calc(2 * var(--u));
  height: calc(454 * var(--u));
  background: repeating-linear-gradient(#b2b2b2 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(30 * var(--u)));
}

.tl-line {
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(2 * var(--u));
  background: #ccc;
}

.tl-ava {
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(48 * var(--u));
  max-width: none;
  border-radius: 50%;
}

.tl-card {
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(190 * var(--u));
  height: calc(100 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u)) 0;
  border-radius: calc(16 * var(--u));
  background: var(--c);
  line-height: 1.3;
}

.tl-card small {
  display: block;
  font-size: min(calc(17.5 * var(--u) * var(--tk, 1)), max(calc(17.5 * var(--u)), 12px));
  font-weight: 600;
  color: rgba(0, 0, 0, .36);
}

.tl-card b {
  display: block;
  margin-top: calc(9 * var(--u));
  font-size: min(calc(19.5 * var(--u) * var(--tk, 1)), max(calc(19.5 * var(--u)), 12px));
  font-weight: 700;
  line-height: calc(22 * var(--u));
  color: #000;
}

/* Спільне: знімок-фрагмент у панельних одиницях (панель = 500) */
.am-shot i {
  font-style: normal;
}

.am-frame {
  position: relative;
  overflow: hidden;
  font-size: var(--fs-txt);
  line-height: 1.3;
  color: #111;
}

.am-help {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(17.5 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #9b9ba0;
  font-size: min(calc(12.5 * var(--u) * var(--tk, 1)), max(calc(12.5 * var(--u)), 12px));
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.am-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.am-row > .am-help {
  margin-left: auto;
}

.am-label {
  font-size: var(--fs-txt);
  color: #8a8a8f;
}

.am-chip {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  width: max-content;
  height: calc(36.7 * var(--u));
  overflow: hidden;
  padding-right: calc(14 * var(--u));
  border: calc(1.2 * var(--u)) solid #c7c7cc;
  border-radius: calc(5 * var(--u));
  background: #ececef;
  font-size: var(--fs-cap);
  color: #808080;
}

.am-chip img {
  width: calc(50 * var(--u));
  height: 100%;
  max-width: none;
}

.am-toggle {
  position: relative;
  flex: none;
  width: calc(52.5 * var(--u));
  height: calc(22.5 * var(--u));
  border-radius: calc(11.25 * var(--u));
  background: #35c28e;
}

.am-toggle::after {
  content: '';
  position: absolute;
  top: calc(3 * var(--u));
  right: calc(3.5 * var(--u));
  width: calc(27 * var(--u));
  height: calc(16.5 * var(--u));
  border-radius: calc(8.25 * var(--u));
  background: #fff;
}

.am-h {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: var(--fs-sub);
  font-weight: 700;
  color: #222;
}

/* Панель налаштувань автоворонки (600 px = 500 одиниць) */
.am-panel .tp-tabs.is-flat {
  margin: 0;
}

.am-badge {
  display: inline-grid;
  place-items: center;
  min-width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  margin-left: calc(3 * var(--u));
  padding: 0 calc(3 * var(--u));
  border-radius: calc(7.5 * var(--u));
  background: #fff;
  font-size: min(calc(11 * var(--u) * var(--tk, 1)), max(calc(11 * var(--u)), 12px));
  font-style: normal;
  font-weight: 700;
  color: #111;
}

.am-sec {
  padding: 0 calc(31.7 * var(--u));
}

.am-sec.is-a {
  min-height: calc(219.2 * var(--u));
  padding-block: calc(25 * var(--u)) calc(22 * var(--u));
  background: linear-gradient(#e0dfe5, #eeeef1);
}

.am-sec.is-a .am-chip {
  margin-top: calc(8.5 * var(--u));
}

.am-sec.is-a .am-chip + .am-chip {
  margin-top: calc(6 * var(--u));
}

.am-row.is-toggle {
  margin-top: calc(16 * var(--u));
  padding-top: calc(15 * var(--u));
  border-top: 1px solid #cfcfd4;
  font-size: var(--fs-txt);
  color: #222;
}

.am-sec.is-b {
  min-height: calc(561.6 * var(--u));
  padding-block: calc(42 * var(--u)) calc(44 * var(--u));
  background: linear-gradient(#dedee3 82%, #eeeef1);
}

.am-sec.is-c {
  min-height: calc(178.7 * var(--u));
  padding-block: calc(30 * var(--u)) calc(24 * var(--u));
}

.am-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(46.7 * var(--u));
  margin-top: calc(8 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 1px solid #c7c7cc;
  border-radius: calc(6.7 * var(--u));
  background: #fff;
  font-size: var(--fs-txt);
  white-space: nowrap;
}

.am-select span {
  overflow: hidden;
}

/* Стрілки вгору-вниз числового поля або списку */
.am-updown {
  display: inline-block;
  flex: none;
  width: calc(9 * var(--u));
  height: calc(16 * var(--u));
  margin-left: calc(3 * var(--u));
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M4.5 0 9 6.5H0zM4.5 16 0 9.5h9z' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat;
}

.am-note {
  margin: calc(34 * var(--u)) 0 0;
  font-size: var(--fs-cap);
  text-align: center;
  color: #9a9a9f;
}

.am-panel .tp-foot {
  padding-block: calc(12.5 * var(--u));
}

.am-panel .tp-btn.is-green {
  height: calc(50 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-color: #2aa549;
  background: #2aa549;
  font-size: var(--fs-txt);
}

.am-next {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(55 * var(--u));
  font-size: var(--fs-txt);
  color: #557cd1;
}

.am-next i {
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
}

/* Редактор повідомлення: текст, змінні, кнопки */
.am-ed {
  overflow: hidden;
  border-radius: calc(9 * var(--u));
  background: #fff;
  box-shadow: 0 calc(5 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .13);
}

.am-ed.is-panel {
  margin-top: calc(26.5 * var(--u));
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .07);
}

.am-ed-head {
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  height: calc(39 * var(--u));
  background: #d3d3d8;
  font-size: var(--fs-txt);
  text-align: center;
  color: #7d7d82;
}

.am-ed-head i,
.am-tabs3 i {
  margin-right: calc(8 * var(--u));
}

/* Скріпка під кутом, як у старому інтерфейсі */
.am-clip {
  display: inline-block;
  transform: rotate(45deg);
}

.am-text {
  position: relative;
  min-height: calc(87 * var(--u));
  padding: calc(9 * var(--u)) calc(30 * var(--u)) calc(12 * var(--u)) calc(11.7 * var(--u));
  font-size: var(--fs-txt);
  line-height: 1.45;
}

.am-text.is-focus {
  min-height: calc(172.5 * var(--u));
  border: calc(1.7 * var(--u)) solid #7a9be8;
  border-radius: calc(7 * var(--u));
}

.am-var {
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(8 * var(--u));
  font-size: min(calc(13.5 * var(--u) * var(--tk, 1)), max(calc(13.5 * var(--u)), 12px));
  color: #b5b5b5;
}

.am-btn {
  display: grid;
  grid-template-columns: calc(26 * var(--u)) 1fr calc(26 * var(--u));
  align-items: center;
  height: calc(41.7 * var(--u));
  margin: 0 calc(12.5 * var(--u)) calc(6 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(6.7 * var(--u));
  background: #f0f0f0;
  font-size: var(--fs-txt);
  text-align: center;
  color: #5b7fd6;
}

.am-text + .am-btn {
  margin-top: calc(13 * var(--u));
}

.am-btn i {
  font-size: min(calc(20 * var(--u) * var(--tk, 1)), max(calc(20 * var(--u)), 12px));
  color: #bdbdbd;
}

.am-btn i:last-child {
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
  color: #c9c9c9;
}

.am-add {
  padding: calc(4 * var(--u)) 0 calc(10 * var(--u));
  font-size: var(--fs-txt);
  text-align: center;
  color: #a5a5a5;
}

/* Кнопки «Зображення / Відео / Файл» над редактором */
.am-tabs3 {
  position: absolute;
  top: calc(-6 * var(--u));
  left: calc(41.4 * var(--u));
  display: flex;
  gap: calc(5.6 * var(--u));
}

.am-tabs3 span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(42 * var(--u));
  padding-top: calc(6 * var(--u));
  border-radius: calc(5.5 * var(--u));
  background: #cfced3;
  font-size: var(--fs-txt);
  color: #444;
}

.am-tabs3 span:nth-child(1) { width: calc(177.4 * var(--u)); }
.am-tabs3 span:nth-child(2) { width: calc(117.2 * var(--u)); }
.am-tabs3 span:nth-child(3) { width: calc(102.8 * var(--u)); }

.am-shot.is-ed .am-frame {
  background: #fff;
}

.am-shot.is-ed .am-ed {
  position: absolute;
  top: calc(41.4 * var(--u));
  left: calc(27 * var(--u));
  width: calc(437 * var(--u));
}

.am-shot.is-ed .am-text + .am-btn {
  margin-top: 0;
}

.am-shot.is-ed .am-ed.is-short {
  height: calc(220.6 * var(--u));
}

.am-more {
  position: absolute;
  top: calc(283.4 * var(--u));
  left: calc(39 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  width: calc(413.8 * var(--u));
  height: calc(42 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #cfced3;
  font-size: var(--fs-txt);
  color: #333;
}

.am-more em {
  color: #8e8e93;
}

.am-more i:last-child {
  margin-left: auto;
  font-size: min(calc(20 * var(--u) * var(--tk, 1)), max(calc(20 * var(--u)), 12px));
}

/* Налаштування кнопки: спливна картка */
.am-pop {
  position: absolute;
  top: calc(125.4 * var(--u));
  left: calc(38.9 * var(--u));
  width: calc(413.8 * var(--u));
  overflow: hidden;
  border-radius: calc(8.8 * var(--u));
  background: #fff;
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .18);
}

.am-shot.is-pop-msg .am-pop {
  top: calc(176.8 * var(--u));
}

.am-pop-title {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(42.6 * var(--u));
  font-size: var(--fs-txt);
  color: #557cd1;
}

.am-pop-title i {
  position: absolute;
  right: calc(12 * var(--u));
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
  color: #c9c9c9;
}

.am-pop-tabs {
  display: flex;
  align-items: center;
  height: calc(39 * var(--u));
  background: #e9e9e9;
  font-size: var(--fs-txt);
  color: #333;
}

.am-pop-tabs span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(7 * var(--u));
  height: 100%;
}

.am-pop-tabs span:nth-child(1) { width: calc(116.6 * var(--u)); }
.am-pop-tabs span:nth-child(2) { width: calc(145.5 * var(--u)); }
.am-pop-tabs span:nth-child(3) { width: calc(112.9 * var(--u)); color: #b9b9b9; }

.am-pop-tabs .is-active {
  background: #333;
  color: #fff;
}

.am-pop-tabs .am-help {
  position: relative;
  margin-left: calc(12 * var(--u));
}

.am-pop-tabs .am-help::before {
  content: '';
  position: absolute;
  top: calc(-6 * var(--u));
  bottom: calc(-6 * var(--u));
  left: calc(-11 * var(--u));
  width: 1px;
  background: #c4c4c4;
}

.am-pop-body {
  padding: calc(25.6 * var(--u)) calc(25.7 * var(--u)) calc(26 * var(--u));
  font-size: var(--fs-txt);
  line-height: 1.4;
}

.am-pop-body p {
  margin: 0;
  color: #222;
}

.am-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(48.3 * var(--u));
  margin-top: calc(12.5 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid #ccc;
  border-radius: calc(4 * var(--u));
}

.am-input.is-select {
  border: calc(1.3 * var(--u)) solid #6b8fe6;
}

.am-input i {
  font-size: min(calc(12 * var(--u) * var(--tk, 1)), max(calc(12 * var(--u)), 12px));
  color: #777;
}

.am-checkline {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  margin-top: calc(15 * var(--u));
}

.am-box {
  flex: none;
  width: calc(13 * var(--u));
  aspect-ratio: 1;
  margin-top: calc(4.5 * var(--u));
  border: 1px solid #999;
  border-radius: calc(3 * var(--u));
  background: #fff;
}

.am-pop-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(58 * var(--u));
  padding: 0 calc(26 * var(--u));
  border-top: 1px solid #e3e3e3;
  font-size: var(--fs-txt);
  color: #557cd1;
}

.am-pop-foot .is-red {
  color: #d9534f;
}

/* Перемикач «надсилати заново»: сусідні рядки притьмарені */
.am-shot.is-resub .am-frame {
  padding: 0 calc(27.5 * var(--u));
  background: #dfdfe4;
  font-size: var(--fs-txt);
}

.am-shot.is-resub .am-label {
  font-size: var(--fs-cap);
}

.am-shot.is-resub .am-row.is-check {
  padding-right: calc(10 * var(--u));
}

.am-faded {
  opacity: .32;
}

.am-shot.is-resub .am-faded:first-child .am-row {
  height: calc(41.7 * var(--u));
}

.am-chip.is-plain {
  height: calc(37.5 * var(--u));
  padding: 0 calc(12 * var(--u));
  font-size: var(--fs-cap);
  background: none;
  color: #777;
}

.am-row.is-check {
  gap: calc(8 * var(--u));
  min-height: calc(32 * var(--u));
  padding-block: calc(5 * var(--u));
  margin-top: calc(10 * var(--u));
  border-block: 1px solid #c9c9ce;
  color: #111;
}

.am-faded .am-row.is-check {
  margin-top: 0;
  border: 0;
}

.am-row.is-check .tp-check {
  width: calc(14.5 * var(--u));
  border-radius: calc(3 * var(--u));
  font-size: min(calc(11 * var(--u) * var(--tk, 1)), max(calc(11 * var(--u)), 12px));
}

.am-row.is-check .am-box {
  margin: 0;
}

.am-beta {
  padding: 0 calc(5 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #5b7fd6;
  font-size: min(calc(12 * var(--u) * var(--tk, 1)), max(calc(12 * var(--u)), 12px));
  font-style: normal;
  color: #fff;
}

/* Прев'ю в телефоні 400×778 (на сторінці повернуте на 5°) */
.mockup.is-am-phone {
  --dw: 400;
  --dh: 778;
}

.am-ph-title {
  font-size: min(calc(16 * var(--u) * var(--tk, 1)), max(calc(16 * var(--u)), 12px));
  line-height: 1.2;
  color: #999;
}

.am-ph-title small {
  display: block;
  font-size: min(calc(11 * var(--u) * var(--tk, 1)), max(calc(11 * var(--u)), 12px));
  color: #aaa;
}

.am-ph-chat {
  top: auto;
  bottom: calc(170 / 778 * 100%);
}

.am-ph-chat .am-ph-title {
  margin: 0 0 calc(7 * var(--u));
  text-align: center;
}

.am-ph-msg {
  width: calc(194 * var(--u));
  margin-left: calc(31 * var(--u));
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: calc(14 * var(--u));
  background: #eee;
  font-size: min(calc(16.5 * var(--u) * var(--tk, 1)), max(calc(16.5 * var(--u)), 12px));
  line-height: 1.33;
  color: #222;
}

.am-ph-msg p {
  margin: 0;
  padding: calc(8 * var(--u)) calc(11 * var(--u)) 0;
}

.am-ph-msg p + p {
  padding-top: calc(20 * var(--u));
  padding-bottom: calc(8 * var(--u));
}

.am-ph-msg span {
  display: block;
  padding: calc(10.5 * var(--u)) 0;
  border-top: 1px solid #e6e6e6;
  background: #fff;
  text-align: center;
  color: #5b7fd6;
}

.am-ph-ava {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f45d3c;
}

/* Наступне повідомлення: затримка (меню) і дата (календар), 800 px = 500 одиниць */
.am-shot.is-add .am-frame {
  background: #dad9df;
}

.am-first {
  position: absolute;
  top: calc(31 * var(--u));
  left: calc(31 * var(--u));
  width: calc(437.5 * var(--u));
  height: calc(89.4 * var(--u));
  padding: calc(13 * var(--u));
  border-radius: calc(8.75 * var(--u));
  background: #fff;
  font-size: var(--fs-txt);
  line-height: 1.45;
}

.am-first b {
  display: block;
  color: #aaa;
}

.am-first span {
  color: #8a8a8a;
}

.am-first i {
  position: absolute;
  top: calc(16 * var(--u));
  right: calc(18 * var(--u));
  font-size: min(calc(15 * var(--u) * var(--tk, 1)), max(calc(15 * var(--u)), 12px));
  color: #c4c4c4;
}

.am-when {
  position: absolute;
  top: calc(167.5 * var(--u));
  left: calc(297 * var(--u));
  right: 0;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(30 * var(--u));
  font-size: var(--fs-txt);
}

.am-when.is-date {
  left: calc(121 * var(--u));
}

.am-when > i:first-child {
  font-size: min(calc(16 * var(--u) * var(--tk, 1)), max(calc(16 * var(--u)), 12px));
}

.am-date {
  display: grid;
  place-items: center;
  width: calc(80 * var(--u));
  height: 100%;
  border: calc(1.3 * var(--u)) solid #6b8fe6;
  border-radius: calc(4 * var(--u));
  font-weight: 700;
}

.am-time {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.am-time b:first-child {
  font-weight: 400;
}

.am-dots {
  position: absolute;
  right: calc(16 * var(--u));
  font-size: min(calc(23 * var(--u) * var(--tk, 1)), max(calc(23 * var(--u)), 12px));
}

.am-shot.is-add .am-tabs3 {
  top: calc(214.4 * var(--u));
  left: calc(47 * var(--u));
  gap: calc(5 * var(--u));
}

.am-shot.is-add .am-tabs3 span {
  height: calc(37.5 * var(--u));
  padding: 0;
  background: #cac9ce;
  font-size: var(--fs-txt);
}

.am-shot.is-add .am-tabs3 span:nth-child(1) { width: calc(143.6 * var(--u)); }
.am-shot.is-add .am-tabs3 span:nth-child(2) { width: calc(150 * var(--u)); }
.am-shot.is-add .am-tabs3 span:nth-child(3) { width: calc(102.7 * var(--u)); }

.am-ed.is-second {
  position: absolute;
  top: calc(256 * var(--u));
  left: calc(31 * var(--u));
  width: calc(437.5 * var(--u));
}

.am-ed.is-second .am-text {
  min-height: calc(99 * var(--u));
  padding-top: calc(10 * var(--u));
  border-bottom: 1px solid #e5e5e5;
}

.am-next-btn {
  position: absolute;
  top: calc(482.5 * var(--u));
  left: calc(31 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--u));
  width: calc(437.5 * var(--u));
  height: calc(65 * var(--u));
  border-radius: calc(8.75 * var(--u));
  background: #567cd1;
  font-size: var(--fs-txt);
  color: #fff;
}

.am-menu {
  position: absolute;
  top: calc(141 * var(--u));
  left: calc(70 * var(--u));
  display: flex;
  flex-direction: column;
  width: calc(223.75 * var(--u));
  padding: calc(4.6 * var(--u)) 0 0;
  border-radius: calc(4 * var(--u));
  background: linear-gradient(#706f75, #858589 45%, #6d717c 80%, #66697a);
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .3);
  font-size: var(--fs-txt);
  font-weight: 600;
  line-height: 1.38;
  color: #fff;
}

.am-menu span {
  position: relative;
  padding-left: calc(26.9 * var(--u));
}

.am-menu .is-on::before {
  content: '\2713';
  position: absolute;
  left: calc(6 * var(--u));
}

.am-cal {
  position: absolute;
  top: calc(198.75 * var(--u));
  left: calc(145 * var(--u));
  width: calc(315 * var(--u));
  height: calc(349.4 * var(--u));
  padding: 0 calc(14.4 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .22);
  font-size: var(--fs-txt);
  text-align: center;
}

.am-cal::before {
  content: '';
  position: absolute;
  top: calc(-6 * var(--u));
  left: calc(13 * var(--u));
  border: calc(6.5 * var(--u)) solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
}

.am-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(53.25 * var(--u));
  padding: calc(13 * var(--u)) calc(19 * var(--u)) 0;
}

.am-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, calc(40 * var(--u)));
  grid-auto-rows: calc(40 * var(--u));
  place-items: center;
}

.am-cal-grid .is-out {
  color: #aaa;
}

.am-cal-grid .is-on {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #222;
  color: #fff;
}

/* Прев'ю стоїть у float-обгортці: без явної ширини контейнер мокапа стискається до нуля */
.mockup.is-am-phone {
  width: 300px;
  max-width: 100%;
}

/* «Увімк» / «Вимк» на сторінці: підпис в один рядок, текст праворуч вирівняний */
.help-switch {
  width: auto;
  min-width: 3.3em;
  padding-right: 12px;
  white-space: nowrap;
}

/* Меню затримок не налазить на «в 09:00» */
.am-shot.is-add .am-menu {
  left: calc(79 * var(--u));
  width: calc(218 * var(--u));
}

.am-shot.is-delay .am-when {
  left: calc(309 * var(--u));
}

.am-shot.is-add .am-date {
  width: calc(100 * var(--u));
}

/* Картки коду: 692 одиниці на 350 px сторінки */
.crm:has(> .tp-code-card) {
  --u0: .5;
}

/* ===== «Розсилки» (/help/sending/) =====
   Панель 500 одиниць; «Повідомлення» — панель + телефон у кадрі 851 одиниця. Текст — токени --fs-* */

.tp.sd-panel {
  display: flex;
  flex-direction: column;
  background: #dcdbe0;
}

.sd-panel .tp-head {
  flex: none;
  border-color: #c8c7cc;
}

.sd-panel .tp-foot {
  flex: none;
  margin-top: auto;
  border-color: #c8c7cc;
}

.sd-panel .tp-foot .tp-btn i {
  font-size: min(calc(13 * var(--u) * var(--tk, 1)), max(calc(13 * var(--u)), 12px));
}

.sd-body {
  flex: 1;
  overflow: hidden;
}

/* Аудиторія: список обрізається підвалом, як у застосунку */
.sd-body.is-audience {
  flex: none;
  height: calc(1022 * var(--u));
  padding-bottom: 0;
}

.sd-filters-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(26 * var(--u)) 0 calc(8 * var(--u));
}

.sd-filters-head b {
  font-size: var(--fs-sub);
}

.sd-clear {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: #8a8a8f;
}

.sd-q {
  display: grid;
  place-items: center;
  width: calc(23 * var(--u));
  aspect-ratio: 1;
  border: calc(1.6 * var(--u)) solid #333;
  border-radius: 50%;
  font-size: min(calc(15 * var(--u) * var(--tk, 1)), max(calc(15 * var(--u)), 12px));
  font-style: normal;
  color: #333;
}

.sd-row {
  display: grid;
  grid-template-columns: calc(118 * var(--u)) minmax(0, 1fr) calc(22 * var(--u));
  align-items: center;
  column-gap: calc(4 * var(--u));
  min-height: calc(46 * var(--u));
  border-top: 1px solid #c4c3c8;
}

.sd-rows:not(.sd-ex) .sd-row:last-child {
  border-bottom: 1px solid #c4c3c8;
}

.sd-row > span:first-child {
  font-size: var(--fs-cap);
  line-height: 1.15;
  color: #222;
}

.sd-row em {
  overflow: hidden;
  white-space: nowrap;
  color: #8e8e93;
}

.sd-chev {
  justify-self: end;
  width: calc(9 * var(--u));
  aspect-ratio: 1;
  margin: 0 calc(6 * var(--u)) calc(5 * var(--u)) 0;
  border-right: calc(1.6 * var(--u)) solid #a5a5aa;
  border-bottom: calc(1.6 * var(--u)) solid #a5a5aa;
  transform: rotate(45deg);
}

.sd-ch {
  display: flex;
  gap: calc(8 * var(--u));
}

.sd-ch > span {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  color: #999;
}

.sd-ch img {
  width: calc(36 * var(--u));
  border-radius: 50%;
  box-shadow: 0 0 0 calc(2.5 * var(--u)) #fff;
}

.sd-ex-head {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin: calc(30 * var(--u)) 0 calc(9 * var(--u));
  font-size: var(--fs-cap);
  font-weight: 700;
}

.sd-ex-head i {
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
}

.sd-ex {
  overflow: hidden;
  border-radius: calc(5 * var(--u));
  background: #dfc6ca;
}

.sd-ex .sd-row {
  grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr) calc(22 * var(--u));
  padding-left: calc(8 * var(--u));
  border-color: #ccb3b7;
}

.sd-ex .sd-row:first-child {
  border-top: 0;
}

.sd-apply {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(40 * var(--u));
}

.sd-apply .tp-btn.is-blue {
  height: calc(42 * var(--u));
}

.sd-more {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: #5a86d6;
}

.sd-more i {
  font-size: min(calc(34 * var(--u) * var(--tk, 1)), max(calc(34 * var(--u)), 12px));
  color: #6f7a8f;
}

.sd-people {
  display: grid;
  gap: calc(4 * var(--u));
  margin-top: calc(32 * var(--u));
}

.sd-person {
  display: grid;
  grid-template-columns: calc(19 * var(--u)) calc(50 * var(--u)) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #fff;
}

.sd-person.is-all {
  grid-template-columns: calc(19 * var(--u)) 1fr;
  align-items: center;
  min-height: calc(50 * var(--u));
  padding-block: 0;
}

.sd-check {
  display: grid;
  place-items: center;
  width: calc(19 * var(--u));
  aspect-ratio: 1;
  margin-top: calc(2 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #5b7fd6;
  font-size: min(calc(14 * var(--u) * var(--tk, 1)), max(calc(14 * var(--u)), 12px));
  color: #fff;
}

.sd-person.is-all .sd-check {
  margin-top: 0;
}

.sd-ava {
  width: 100%;
  max-width: none;
  border-radius: 50%;
}

.sd-name {
  display: block;
  color: #111;
}

.sd-info small {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-cap);
  color: #8e8e93;
}

.sd-info small img {
  width: calc(16 * var(--u));
}

.sd-info small.is-plain {
  margin-top: 0;
}

.sd-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(5 * var(--u));
  font-size: var(--fs-cap);
  color: #222;
}

.sd-chip {
  padding: calc(1 * var(--u)) calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  font-weight: 700;
}

.sd-chip.is-asked {
  background: #e3e3e3;
}

.sd-chip.is-wish {
  background: #b7ee6a;
}

.sd-chip.is-client {
  background: #2dbb93;
  color: #fff;
}

/* Запуск */
.sd-body.is-start {
  min-height: calc(536 * var(--u));
}

.sd-before {
  margin-top: calc(33 * var(--u));
}

.sd-before b {
  font-size: var(--fs-sub);
}

.sd-before ul {
  margin: calc(4 * var(--u)) 0 0;
  padding-left: calc(26 * var(--u));
  line-height: 1.38;
}

.sd-before li {
  margin-bottom: calc(10 * var(--u));
  list-style: disc;
}

.sd-launch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(50 * var(--u));
  margin-top: calc(34 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #5a7fd6;
  color: #fff;
}

.sd-warn {
  margin: calc(16 * var(--u)) calc(30 * var(--u)) 0;
  font-size: var(--fs-cap);
  line-height: 1.35;
  text-align: center;
  color: #95959a;
}

/* Повідомлення: панель + телефон 851×915 (висоту задає панель: на самому .crm одиниця --u ще не працює) */
.sd-msg .tp {
  min-height: calc(915 * var(--u));
}

.sd-lead {
  max-width: calc(380 * var(--u));
  margin: calc(27 * var(--u)) 0 calc(14 * var(--u));
  line-height: 1.35;
}

.sd-pizza {
  display: block;
  width: 100%;
  max-width: none;
}

.sd-textarea {
  margin-top: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border: calc(1.6 * var(--u)) solid #6b8fe6;
  border-radius: calc(4 * var(--u));
  background: #fff;
  line-height: 1.45;
}

.sd-hint {
  margin: calc(6 * var(--u)) 0 calc(12 * var(--u));
  overflow: hidden;
  font-size: var(--fs-cap);
  white-space: nowrap;
  color: #95959a;
}

.sd-phone {
  position: absolute;
  top: calc(83 * var(--u));
  left: calc(410.6 * var(--u));
  width: calc(372.3 * var(--u));
  max-width: none;
  filter: drop-shadow(0 calc(12 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .22));
}

/* Чат у телефоні тримається низу, як у месенджері. Бульбашка ширша за картинку,
   щоб текст 12 px умістився й над картинкою лишилося місце, як на старому скриншоті */
.sd-chat {
  position: absolute;
  top: calc(238 * var(--u));
  left: calc(488 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  width: calc(254 * var(--u));
  height: calc(440 * var(--u));
  overflow: hidden;
}

.sd-chat img {
  flex: none;
  width: calc(195 * var(--u));
  max-width: none;
  border-radius: calc(11 * var(--u));
}

.sd-chat p {
  margin: 0;
  padding: calc(7 * var(--u)) calc(11 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #eee;
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
  line-height: 1.22;
  color: #111;
}

.sd-chat p span {
  white-space: nowrap;
}

/* ===== «Аудиторія» (/help/audience/) =====
   Одиниця — піксель старого знімка: «Усі клієнти» 720×780, «Новий список» 760×709. Текст — токени --fs-* */

.au i {
  font-style: normal;
}

.au-frame {
  display: grid;
  grid-template-columns: calc(var(--side) * var(--u)) minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  line-height: 1.3;
  color: #111;
}

.au-frame.is-all {
  --side: 360;
  --head: 58;
  --row: 60;
  height: calc(780 * var(--u));
}

.au-frame.is-list {
  --side: 326;
  --head: 53;
  --row: 54;
  height: calc(709 * var(--u));
}

.au-head {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(var(--head) * var(--u));
  padding: 0 calc(18 * var(--u)) 0 calc(24 * var(--u));
}

.au-head b {
  flex: 1;
  font-size: var(--fs-ttl);
}

.au-head > i {
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

.au-head > .ion-plus-circled {
  font-size: min(calc(30 * var(--u) * var(--tk, 1)), max(calc(30 * var(--u)), 12px));
}

.au-head.is-line {
  border-bottom: 1px solid #e3e3e6;
}

/* Ліва колонка: списки клієнтів */
.au-side {
  border-right: calc(2 * var(--u)) solid #8a8a8a;
}

.is-list .au-side {
  border: 0;
}

.au-side .au-head + .au-seg {
  margin-top: calc(8 * var(--u));
}

.au-seg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--row) * var(--u));
  margin: 0 calc(23 * var(--u)) 0 calc(24 * var(--u));
  border-bottom: 1px solid #e8e8e8;
  font-size: var(--fs-txt);
}

.au-seg.is-active {
  margin: 0 calc(6 * var(--u));
  padding: 0 calc(17 * var(--u)) 0 calc(18 * var(--u));
  border: 0;
  border-radius: calc(6 * var(--u));
  background: #444;
  color: #fff;
}

.au-count {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font-size: var(--fs-cap);
  color: #8c8c8c;
}

.au-seg.is-active .au-count {
  color: #bbb;
}

.au-count i {
  font-size: min(calc(17 * var(--u) * var(--tk, 1)), max(calc(17 * var(--u)), 12px));
}

/* Права колонка: усі клієнти */
.au-user {
  position: relative;
  display: grid;
  grid-template-columns: calc(48 * var(--u)) calc(16 * var(--u)) minmax(0, 1fr);
  align-items: start;
  column-gap: calc(7 * var(--u));
  height: calc(84 * var(--u));
  padding: calc(17 * var(--u)) 0 0 calc(24 * var(--u));
  font-size: var(--fs-txt);
}

.au-user::after {
  content: '';
  position: absolute;
  left: calc(102 * var(--u));
  right: 0;
  bottom: 0;
  height: 1px;
  background: #ececec;
}

.au-ava {
  width: 100%;
  max-width: none;
  border-radius: 50%;
}

.au-ch {
  width: 100%;
  max-width: none;
  margin-top: calc(5 * var(--u));
}

.au-user > span {
  margin-top: calc(2 * var(--u));
  white-space: nowrap;
}

/* Права панель: новий список із фільтрами */
.au-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #dad9de;
}

.au-panel .au-head {
  flex: none;
  padding: 0 calc(22 * var(--u)) 0 calc(32 * var(--u));
  border-color: #c8c7cc;
}

.au-pbody {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 calc(33 * var(--u)) 0 calc(32 * var(--u));
}

.au-fhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(30 * var(--u));
  margin: calc(22 * var(--u)) 0 calc(3 * var(--u));
}

.au-fhead b {
  font-size: var(--fs-sub);
}

.au-fhead span {
  font-size: var(--fs-txt);
  color: #8e8e93;
}

/* підпис («Канали», «Статус») на вузькому екрані не рветься: колонка може стати ширшою */
.au-frow {
  display: grid;
  grid-template-columns: minmax(calc(76 * var(--u)), max-content) minmax(0, 1fr);
  align-items: center;
  height: calc(40 * var(--u));
  border-bottom: 1px solid #c8c7cc;
  font-size: var(--fs-cap);
}

.au-frow > span {
  white-space: nowrap;
}

.au-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(38 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fff;
}

.au-select em {
  overflow: hidden;
  font-size: var(--fs-txt);
  white-space: nowrap;
  color: #8e8e93;
}

.au-chev {
  flex: none;
  width: calc(9 * var(--u));
  aspect-ratio: 1;
  margin-bottom: calc(5 * var(--u));
  border-right: calc(1.5 * var(--u)) solid #a5a5aa;
  border-bottom: calc(1.5 * var(--u)) solid #a5a5aa;
  transform: rotate(45deg);
}

.au-apply.tp-btn.is-blue {
  height: calc(36 * var(--u));
  margin-top: calc(10 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: #5d7bc3;
  border-color: #5d7bc3;
}

/* Розкритий список каналів поверх фільтрів */
.au-drop {
  position: absolute;
  top: calc(95 * var(--u));
  left: calc(108 * var(--u));
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: calc(293 * var(--u));
  overflow: hidden;
  border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u));
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .18);
  font-size: var(--fs-txt);
}

.au-drop span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(41.5 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(14 * var(--u));
}

.au-drop .is-on {
  background: #7a98e9;
  color: #fff;
}

.au-drop i {
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

.au-cards {
  display: grid;
  gap: calc(3 * var(--u));
  margin-top: calc(34 * var(--u));
}

.au-card {
  display: grid;
  grid-template-columns: calc(16 * var(--u)) calc(44 * var(--u)) minmax(0, 1fr);
  align-items: start;
  column-gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #fff;
}

.au-card.is-all {
  grid-template-columns: calc(16 * var(--u)) 1fr;
  align-items: center;
  column-gap: calc(7 * var(--u));
  min-height: calc(40 * var(--u));
  padding-block: 0;
  font-size: var(--fs-txt);
}

.au-box {
  width: calc(16 * var(--u));
  aspect-ratio: 1;
  margin-top: calc(1 * var(--u));
  border: calc(1.4 * var(--u)) solid #333;
  border-radius: calc(3 * var(--u));
  background: #fff;
}

.au-card.is-all .au-box {
  margin: 0;
}

.au-name {
  display: block;
  font-size: var(--fs-txt);
  text-decoration: underline dotted #8fa6d6;
  text-underline-offset: .25em;
  color: #5677c2;
}

.au-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--u)) calc(6 * var(--u));
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-cap);
  color: #8e8e93;
}

.au-line img {
  width: calc(16 * var(--u));
}

.au-chip {
  margin-left: auto;
  padding: 0 calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #e3e3e3;
  font-weight: 700;
  color: #111;
}

.au-foot.tp-foot {
  flex: none;
  padding: calc(12 * var(--u)) calc(32 * var(--u));
  border-color: #c8c7cc;
}

.au-foot .tp-btn {
  height: calc(42 * var(--u));
}

/* Статус завжди праворуч у другому рядку; довгий підпис обрізається трикрапкою, щоб картки були однакові */
.au-line {
  flex-wrap: nowrap;
}

.au-line > span:not(.au-chip) {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.au-chip {
  flex: none;
}

/* ===== «Аналітика» (/help/analytics/) =====
   Одиниця — піксель старого знімка: «Менеджери» 1600×260, «Інструменти» 1200×282. Текст — токени --fs-*.
   На телефоні таблиці не зменшуються, а гортаються вбік (.an-scroll) */

.an-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.an i {
  font-style: normal;
}

.an-frame {
  display: grid;
  grid-template-columns: calc(var(--side) * var(--u)) minmax(0, 1fr);
  background: #dcdbe0;
  line-height: 1.3;
  color: #111;
}

.an.is-managers .an-frame {
  --side: 348;
  --top: 69;
  --item: 88;
}

.an.is-tools .an-frame {
  --side: 376;
  --top: 74;
  --item: 96;
}

/* Бокове меню */
.an-side {
  padding-bottom: calc(12 * var(--u));
  background: #fff;
}

.an-logo {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  height: calc(var(--top) * var(--u));
  padding: calc(14 * var(--u)) 0 0 calc(28 * var(--u));
  border-bottom: 1px solid #e3e3e6;
}

.an-logo b {
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-ttl);
}

.an-logo .am-beta {
  font-size: var(--fs-cap);
}

.an-item {
  display: grid;
  grid-template-columns: calc(36 * var(--u)) 1fr;
  align-items: start;
  min-height: calc(var(--item) * var(--u));
  margin: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
  border-radius: calc(6 * var(--u));
}

.an-item i {
  margin-top: calc(1 * var(--u));
  font-size: min(calc(26 * var(--u) * var(--tk, 1)), max(calc(26 * var(--u)), 12px));
}

.an-title {
  display: block;
  font-size: var(--fs-txt);
}

.an-item small {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.25;
  color: #8e8e93;
}

.an-item.is-active {
  background: #444;
  color: #fff;
}

.an-item.is-active small {
  color: #9a9a9a;
}

/* Верхня смуга: період і вивантаження */
.an-top {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  height: calc(var(--top) * var(--u));
  padding: 0 calc(36 * var(--u));
  border-bottom: 1px solid #c8c7cc;
  white-space: nowrap;
}

/* «Інструменти» вужчі: поля й шрифт смуги менші, щоб усе стало в один рядок */
.an.is-tools .an-top {
  gap: calc(14 * var(--u));
  padding: 0 calc(24 * var(--u));
}

.an.is-tools .an-top > * {
  font-size: var(--fs-cap);
}

.an-label {
  font-size: var(--fs-txt);
  color: #8e8e93;
}

.an-date {
  display: flex;
  align-items: center;
  height: calc(42 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid #c8c7cc;
  border-radius: calc(4 * var(--u));
  background: #fff;
  font-size: var(--fs-txt);
}

.an-xls {
  display: flex;
  align-items: center;
  height: calc(42 * var(--u));
  margin-left: auto;
  padding: 0 calc(14 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #3d3d3d;
  font-size: var(--fs-txt);
  color: #fff;
}

/* Таблиці */
.an-table {
  padding: calc(14 * var(--u)) calc(36 * var(--u)) calc(16 * var(--u));
  font-size: var(--fs-txt);
}

.an-tr {
  display: grid;
  align-items: center;
  column-gap: calc(12 * var(--u));
  border-bottom: 1px solid #cdccd1;
}

.an-tr.is-head {
  align-items: end;
  padding-bottom: calc(6 * var(--u));
  border-bottom: calc(2 * var(--u)) solid #c4c3c8;
  font-size: var(--fs-cap);
  font-weight: 700;
  line-height: 1.25;
}

.an-tr:last-child {
  border-bottom: 0;
}

.an-table.is-managers .an-tr {
  grid-template-columns: 146fr 134fr 127fr 146fr 213fr 142fr 139fr 135fr;
}

.an-table.is-managers .an-tr:not(.is-head) {
  min-height: calc(38 * var(--u));
}

.an-table.is-managers .an-tr > :last-child {
  font-weight: 700;
  color: #2f9f50;
}

.an-table.is-tools .an-tr {
  grid-template-columns: 1fr calc(148 * var(--u));
}

.an-table.is-tools .an-tr:not(.is-head) {
  min-height: calc(44 * var(--u));
}

.an-table.is-tools .an-tr > span:first-child {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}

.an-tile {
  flex: none;
  width: calc(60 * var(--u));
  max-width: none;
  border: 1px solid #c9c9ce;
  border-radius: calc(4 * var(--u));
  background: #fff;
}

.an-table.is-tools .an-tr i {
  font-size: min(calc(18 * var(--u) * var(--tk, 1)), max(calc(18 * var(--u)), 12px));
  color: #bdbdc2;
}

/* ===== «Налаштування проекту» (/help/settings/) =====
   Одиниця — піксель старого знімка (ширина в --dw кожного макета). Текст — токени --fs-* */

.st i {
  font-style: normal;
}

.st-frame {
  position: relative;
  overflow: hidden;
  font-size: var(--fs-txt);
  line-height: 1.35;
  text-align: left;
  color: #111;
}

/* Спільні елементи */
.st-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(5 * var(--u));
  white-space: nowrap;
}

.st-btn.is-blue {
  background: #5a7fd6;
  color: #fff;
}

.st-btn.is-red {
  border: 1px solid #e0574f;
  color: #e0574f;
}

.st-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(10 * var(--u));
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: calc(5 * var(--u));
  background: #fff;
  white-space: nowrap;
}

.st-input i {
  flex: none;
  font-size: min(calc(18 * var(--u) * var(--tk, 1)), max(calc(18 * var(--u)), 12px));
  color: #777;
}

.st-updown {
  display: inline-block;
  flex: none;
  width: calc(10 * var(--u));
  height: calc(18 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M4.5 0 9 6.5H0zM4.5 16 0 9.5h9z' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat;
}

.st-hint {
  margin: calc(10 * var(--u)) 0 0;
  font-size: var(--fs-cap);
  line-height: 1.35;
  color: #9a9a9f;
}

.st-p {
  margin: 0;
}

.st-hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #d6d6db;
}

/* Пурпурові стрілки-позначки зі старих скриншотів */
.st-arrow {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u) * var(--s));
  color: #f0f;
}

.st-arrow svg {
  width: calc(64 * var(--u) * var(--s));
}

.st-arrow path {
  stroke-width: 10;
}

/* Стрілка прив'язана до елемента, на який указує: стоїть праворуч від нього на --dx одиниць */
.st-pin {
  position: relative;
}

.st-arrow.is-pin {
  top: 50%;
  left: calc(100% + var(--dx) * var(--u));
  transform: translateY(-50%);
}

.st-arrow b {
  font-size: calc(46 * var(--u) * var(--s));
  font-weight: 700;
  line-height: 1;
}

/* Канали спілкування 1000×438 */
.st.is-channels .st-frame {
  display: grid;
  grid-template-columns: calc(430 * var(--u)) 1fr;
  min-height: calc(438 * var(--u));
}

.st-side {
  padding-bottom: calc(16 * var(--u));
  background: #fff;
}

.st-side-head {
  height: calc(70 * var(--u));
  padding: calc(20 * var(--u)) calc(30 * var(--u)) 0;
  border-bottom: 1px solid #e3e3e6;
  font-size: var(--fs-ttl);
  font-weight: 700;
}

.st-nav {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) 1fr;
  margin: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u));
  border-radius: calc(8 * var(--u));
}

.st-nav i {
  font-size: min(calc(40 * var(--u) * var(--tk, 1)), max(calc(40 * var(--u)), 12px));
  line-height: 1;
}

.st-nav-t {
  display: block;
}

.st-nav small {
  display: block;
  margin-top: calc(2 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.3;
  color: #8e8e93;
}

.st-nav.is-active {
  background: #444;
  color: #fff;
}

.st-nav.is-active small {
  color: #9e9e9e;
}

.st-right {
  padding: calc(42 * var(--u)) calc(42 * var(--u)) calc(30 * var(--u)) calc(43 * var(--u));
  background: #dcdbe0;
}

.st-card {
  overflow: hidden;
  border-radius: calc(8 * var(--u));
  background: #fff;
}

.st-card-head {
  display: grid;
  place-items: center;
  height: calc(55 * var(--u));
  border-bottom: 1px solid #e6e6e6;
  font-weight: 700;
}

.st-ch4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: calc(20 * var(--u)) calc(10 * var(--u)) calc(22 * var(--u));
}

.st-ch4 span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.25;
  text-align: center;
  color: #4f72c4;
}

.st-ch4 img {
  width: calc(48 * var(--u));
}

.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(32 * var(--u));
  text-align: center;
}

.st-empty i {
  font-size: min(calc(70 * var(--u) * var(--tk, 1)), max(calc(70 * var(--u)), 12px));
  line-height: 1;
}

/* Вікна підключення каналів: затемнений застосунок, біле вікно, стрілка */
.st.is-modal .st-frame {
  min-height: calc(var(--h) * var(--u));
  background: linear-gradient(90deg, #6a6a6a var(--dark), #171717 var(--dark));
}

.st.is-fb { --h: 690; --dark: 74%; }
.st.is-tg { --h: 462; --dark: 69%; }
.st.is-viber { --h: 722; --dark: 69%; }

.st-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 var(--mr) 0 var(--ml);
  top: calc(var(--top) * var(--u));
  padding: calc(var(--pt) * var(--u)) calc(var(--px2) * var(--u)) calc(var(--pb) * var(--u));
  border-radius: calc(var(--r) * var(--u));
  background: #fff;
  text-align: center;
}

.st.is-fb .st-modal { --ml: calc(42 * var(--u)); --mr: calc(193 * var(--u)); --top: 36; --pt: 50; --px2: 50; --pb: 66; --r: 12; }
.st.is-tg .st-modal { --ml: calc(28 * var(--u)); --mr: calc(107 * var(--u)); --top: 28; --pt: 44; --px2: 44; --pb: 56; --r: 12; }
.st.is-viber .st-modal { --ml: calc(37 * var(--u)); --mr: calc(147 * var(--u)); --top: 39; --pt: 64; --px2: 60; --pb: 70; --r: 16; }

.st.is-modal .st-frame {
  padding-bottom: calc(var(--top-pad, 40) * var(--u));
}

.st-x {
  position: absolute;
  top: calc(22 * var(--u) * var(--xs, 1));
  right: calc(22 * var(--u) * var(--xs, 1));
  width: calc(22 * var(--u) * var(--xs, 1));
  aspect-ratio: 1;
  background:
    linear-gradient(45deg, transparent 46%, #aaa 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #aaa 46% 54%, transparent 54%);
}

.st.is-viber .st-x {
  --xs: 1.6;
}

.st-mtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  gap: calc(12 * var(--u) * var(--ts, 1));
  font-size: var(--fs-ttl);
}

.st.is-viber .st-mtitle {
  --ts: 1.6;
}

.st-mtitle img {
  width: calc(32 * var(--u) * var(--ts, 1));
}

.st-mtext {
  margin: calc(28 * var(--u) * var(--ts, 1)) 0 0;
  font-size: var(--fs-cap);
  line-height: 1.45;
  color: #8e8e93;
}

.st.is-viber .st-mtext {
  --ts: 1.6;
}

.st-dark {
  font-size: var(--fs-txt);
  color: #111;
}

.st-mtext.st-dark,
.st-mtext .st-dark {
  color: #111;
}

.st-mtext.is-hint {
  margin-top: calc(26 * var(--u));
}

.st-mtext u {
  text-decoration-color: #999;
}

.st-fblogin {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(36 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(4 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #4267b2;
  font-size: var(--fs-cap);
  font-weight: 700;
  color: #fff;
}

.st-fblogin i {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #fff;
  font-size: min(calc(26 * var(--u) * var(--tk, 1)), max(calc(26 * var(--u)), 12px));
  color: #4267b2;
}

.st.is-modal .st-hr {
  align-self: stretch;
  margin-top: calc(42 * var(--u));
}

.st.is-modal .st-input {
  align-self: stretch;
  margin-top: calc(16 * var(--u) * var(--ts, 1));
  padding: 0 calc(14 * var(--u) * var(--ts, 1));
}

.st.is-fb .st-input {
  height: calc(64 * var(--u));
}

.st.is-tg .st-input {
  height: calc(64 * var(--u));
}

.st.is-viber .st-input {
  height: calc(90 * var(--u));
  --ts: 1.4;
}

.st-input.is-token {
  font-size: var(--fs-txt);
  font-style: italic;
  color: #a5a5a5;
}

.st.is-modal .st-btn.is-blue {
  height: calc(56 * var(--u) * var(--ts, 1));
  margin-top: calc(16 * var(--u) * var(--ts, 1));
  padding: 0 calc(20 * var(--u) * var(--ts, 1));
}

.st.is-viber .st-btn.is-blue {
  --ts: 1.4;
}

/* Сторінка Facebook і тип розсилок 600×158 */
.st.is-pagetype .st-frame {
  padding: calc(18 * var(--u)) calc(17 * var(--u)) calc(16 * var(--u));
  background: #fff;
}

.st-page {
  display: grid;
  grid-template-columns: calc(66 * var(--u)) 1fr auto;
  align-items: center;
  column-gap: calc(14 * var(--u));
  padding-left: calc(8 * var(--u));
}

.st-page img {
  width: 100%;
}

.st-page small {
  display: block;
  font-size: var(--fs-cap);
  color: #8e8e93;
}

.st-page-name {
  font-size: var(--fs-ttl);
}

.st-page .st-btn.is-red {
  height: calc(66 * var(--u));
  padding: 0 calc(26 * var(--u));
  border-radius: calc(6 * var(--u));
}

.st-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(40 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #5a7fd6;
  color: #fff;
}

.st-type i {
  font-size: min(calc(16 * var(--u) * var(--tk, 1)), max(calc(16 * var(--u)), 12px));
}

/* Форми бота й автовідповідача 700 */
.st.is-form .st-frame {
  padding: calc(31 * var(--u)) calc(31 * var(--u)) calc(34 * var(--u));
  background: #fff;
}

.st-textarea {
  position: relative;
  min-height: calc(157 * var(--u));
  padding: calc(20 * var(--u)) calc(20 * var(--u));
  border: 1px solid #ccc;
  border-radius: calc(6 * var(--u));
}

.st-resize {
  position: absolute;
  right: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  width: calc(14 * var(--u));
  aspect-ratio: 1;
  background: linear-gradient(135deg, transparent 45%, #666 45% 52%, transparent 52% 70%, #666 70% 77%, transparent 77%);
}

.st.is-form .st-hint {
  margin-top: calc(14 * var(--u));
}

.st.is-form .st-btn.is-blue {
  height: calc(59 * var(--u));
  margin-top: calc(26 * var(--u));
  padding: 0 calc(28 * var(--u));
}

.st-checkline {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.st-check {
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  aspect-ratio: 1;
  border-radius: calc(4 * var(--u));
  background: #3b82f6;
  font-size: min(calc(16 * var(--u) * var(--tk, 1)), max(calc(16 * var(--u)), 12px));
  color: #fff;
}

.st-checkline + .st-p {
  margin-top: calc(28 * var(--u));
}

.st.is-form .st-input.is-select {
  height: calc(79 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: 0 calc(20 * var(--u));
}

/* Базова інформація 600×854 */
.st.is-base .st-frame {
  min-height: calc(854 * var(--u));
  background: linear-gradient(90deg, #dcdbe0 calc(522 * var(--u)), #fff calc(522 * var(--u)));
}

.st-panel {
  width: calc(522 * var(--u));
}

.st-phead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(65 * var(--u));
  padding: 0 calc(48 * var(--u)) 0 calc(39 * var(--u));
  border-bottom: 1px solid #c8c7cc;
  font-size: var(--fs-ttl);
}

.st-phead i {
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

.st-pbody {
  padding: calc(20 * var(--u)) calc(39 * var(--u)) calc(40 * var(--u));
}

.st-label {
  margin: calc(30 * var(--u)) 0 calc(8 * var(--u));
}

.st-logo-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(16 * var(--u));
}

.st-logo-row .st-label {
  margin-top: calc(4 * var(--u));
}

.st-upload {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(38 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fff;
  font-size: var(--fs-cap);
  color: #4f72c4;
}

.st-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(131 * var(--u));
  aspect-ratio: 1;
  border-radius: calc(8 * var(--u));
  background: #262626;
}

.st-logo img {
  width: 62%;
}

.st-pal.tp-palette {
  height: calc(49 * var(--u));
  border-radius: calc(6 * var(--u));
}

.st.is-base .st-input {
  height: calc(50 * var(--u));
  padding: 0 calc(10 * var(--u));
}

.st-input > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st.is-base .st-btn.is-blue {
  height: calc(51 * var(--u));
  margin-top: calc(44 * var(--u));
  padding: 0 calc(18 * var(--u));
}

.st.is-base .st-hr {
  margin-top: calc(44 * var(--u));
  border-color: #c8c7cc;
}

.st-danger {
  margin: calc(34 * var(--u)) 0 calc(18 * var(--u));
  font-size: var(--fs-sub);
  font-weight: 700;
}

.st-btn.is-red.is-small {
  height: calc(38 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(3 * var(--u));
  font-size: var(--fs-cap);
}

.st.is-base .st-pin + .st-p {
  margin-top: calc(18 * var(--u));
}

/* Команда 1008×472 */
.st.is-team .st-frame {
  display: grid;
  grid-template-columns: calc(600 * var(--u)) 1fr;
  min-height: calc(472 * var(--u));
}

.st-team {
  background: #fff;
}

.st-thead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(98 * var(--u));
  padding: 0 calc(30 * var(--u)) 0 calc(40 * var(--u));
  border-bottom: 1px solid #ddd;
  font-size: var(--fs-ttl);
}

.st-thead i {
  font-size: min(calc(44 * var(--u) * var(--tk, 1)), max(calc(44 * var(--u)), 12px));
}

.st-member {
  padding: calc(40 * var(--u)) calc(40 * var(--u));
}

.st-member > div {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.st-mname {
  flex: 1;
}

.st-member small {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: var(--fs-cap);
  color: #8e8e93;
}

.st-chip {
  padding: calc(2 * var(--u)) calc(9 * var(--u));
  border-radius: calc(4 * var(--u));
  font-size: var(--fs-cap);
  color: #fff;
}

.st-chip.is-green {
  background: #2aa549;
}

.st-chip.is-dark {
  background: #333;
}

.st-team-bg {
  position: relative;
  background: linear-gradient(#666 45%, #fff);
}

.st-curve {
  position: absolute;
  top: calc(45 * var(--u));
  left: calc(42 * var(--u));
  width: calc(140 * var(--u));
  max-width: none;
}

.st-team-bg span {
  position: absolute;
  top: calc(165 * var(--u));
  left: calc(58 * var(--u));
  font-size: var(--fs-sub);
  white-space: nowrap;
  color: #fff;
}

/* Права доступу 500×1401 */
.st.is-roles .st-frame {
  background: #dcdbe0;
}

.st-rtop {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(62 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(30 * var(--u));
  font-size: var(--fs-ttl);
}

.st-rtop b {
  flex: 1;
  font-weight: 400;
}

.st-rtop i {
  font-size: min(calc(22 * var(--u) * var(--tk, 1)), max(calc(22 * var(--u)), 12px));
}

.st-rtabs.tp-tabs.is-flat {
  height: calc(36 * var(--u));
  margin: 0;
}

.st-rbody {
  display: grid;
  gap: calc(20 * var(--u));
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u));
}

.st-rcard {
  overflow: hidden;
  border-radius: calc(10 * var(--u));
  background: #fff;
}

.st-rhead {
  display: grid;
  grid-template-columns: calc(50 * var(--u)) 1fr auto;
  align-items: center;
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
}

.st-rcard.is-admin .st-rhead {
  grid-template-columns: 1fr auto;
  padding-bottom: 0;
}

.st-rhead > i {
  font-size: min(calc(30 * var(--u) * var(--tk, 1)), max(calc(30 * var(--u)), 12px));
  line-height: 1;
}

.st-rhead b {
  display: block;
}

.st-rhead small {
  display: block;
  font-size: var(--fs-cap);
  color: #8e8e93;
}

.st-rcard.is-admin p {
  margin: calc(10 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.35;
  color: #8e8e93;
}

.st-ritems {
  display: grid;
  gap: calc(10 * var(--u));
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)) calc(68 * var(--u));
  border-top: 1px solid #e3e3e3;
}

.st-ritems > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(14 * var(--u));
  line-height: 1.3;
}

.st-toggle {
  position: relative;
  flex: none;
  width: calc(52 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(11 * var(--u));
  background: #2ebd8a;
}

.st-toggle::after {
  content: '';
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(5 * var(--u));
  width: calc(25 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #fff;
}

.st-toggle.is-big {
  width: calc(52 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(18 * var(--u));
}

.st-toggle.is-big::after {
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
}

.st-toggle.is-off {
  border: calc(2 * var(--u)) solid #222;
  background: #fff;
}

.st-toggle.is-off::after {
  top: calc(2 * var(--u));
  right: auto;
  left: calc(2 * var(--u));
  background: #222;
}

/* Інтеграція по API 700×668 */
.st.is-api .st-frame {
  background: #fff;
}

.st-api-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(100 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-bottom: 1px solid #ddd;
  font-size: var(--fs-ttl);
}

.st-api-head b span {
  color: #2ebd8a;
}

.st-api-head .st-toggle.is-big,
.st-api-opt .st-toggle.is-big {
  width: calc(83 * var(--u));
  height: calc(58 * var(--u));
  border-radius: calc(29 * var(--u));
}

.st-api-head .st-toggle.is-big::after {
  top: calc(5 * var(--u));
  right: calc(5 * var(--u));
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
}

.st-api-opt .st-toggle.is-big {
  height: calc(34 * var(--u));
}

.st-api-opt .st-toggle.is-off::after {
  width: calc(40 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(13 * var(--u));
}

.st-api-body {
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
}

.st-api-row {
  display: grid;
  grid-template-columns: calc(265 * var(--u)) 1fr;
  align-items: center;
  margin-top: calc(18 * var(--u));
}

.st-api-row .st-input {
  height: calc(58 * var(--u));
  padding: 0 calc(16 * var(--u));
}

.st.is-api .st-hr {
  margin-top: calc(32 * var(--u));
}

.st-api-opt {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(40 * var(--u));
  margin-top: calc(24 * var(--u));
  line-height: 1.4;
}

.st-api-foot {
  padding: calc(20 * var(--u));
  border-top: 1px solid #ddd;
}

.st-api-foot .st-btn.is-blue {
  height: calc(59 * var(--u));
  padding: 0 calc(18 * var(--u));
}

.st.is-fb .st-mtitle span {
  max-width: calc(330 * var(--u));
  text-align: left;
}

.st.is-modal .st-pin {
  align-self: stretch;
  display: flex;
  justify-content: center;
}

.st.is-modal .st-pin .st-input {
  flex: 1;
}

.st.is-modal .st-pin .st-arrow.is-pin {
  margin-top: calc(8 * var(--u));
}

/* Обгортка для широких макетів: на телефоні гортаються вбік, а не зменшуються до нечитабельного */
.help-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Налаштування Facebook-сторінки (/help/settings/, заявка на періодичні розсилки), 800 одиниць */
.fb i {
  font-style: normal;
}

.fb-frame {
  position: relative;
  overflow: hidden;
  font-size: var(--fs-cap);
  line-height: 1.35;
  text-align: left;
  color: #1c1e21;
}

.fb.is-settings .fb-frame {
  min-height: calc(441 * var(--u));
  background: #e9ebee;
}

/* Магентові позначки зі старих скриншотів */
.fb-num {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(var(--d, 32) * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f4f;
  font-size: var(--fs-txt);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.fb-nav {
  position: relative;
  height: calc(37 * var(--u));
  background: #fcfcfc;
  border-bottom: 1px solid #dddfe2;
}

.fb-nav-l,
.fb-nav-r {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  white-space: nowrap;
  color: #4b4f56;
}

.fb-nav-l {
  left: calc(-18 * var(--u));
}

.fb-nav-r {
  right: calc(-22 * var(--u));
  gap: calc(22 * var(--u));
  padding-left: calc(12 * var(--u));
  background: #fcfcfc;
}

.fb-nav-r .is-active {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  border-bottom: calc(3 * var(--u)) solid #4267b2;
  font-weight: 700;
  color: #1c1e21;
}

.fb-num.is-tab {
  top: calc(100% - 4 * var(--u));
  left: 40%;
}

.fb-body {
  display: grid;
  grid-template-columns: calc(272 * var(--u)) 1fr;
  gap: calc(12 * var(--u));
  padding: calc(11 * var(--u)) calc(19 * var(--u)) 0 calc(12 * var(--u));
}

.fb-left {
  align-self: start;
  background: #fff;
}

.fb-li {
  position: relative;
  display: grid;
  grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr);
  align-items: center;
  min-height: calc(34 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
  border-bottom: 1px solid #e9ebee;
  color: #4b4f56;
}

.fb-li span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-li i {
  font-size: min(calc(15 * var(--u) * var(--tk, 1)), max(calc(15 * var(--u)), 12px));
  color: #a8abaf;
}

.fb-li.is-active {
  font-weight: 700;
  color: #1c1e21;
}

.fb-li.is-active i {
  color: #4b4f56;
}

.fb-new {
  margin-left: calc(6 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #f0a0d0;
  font-style: normal;
  color: #fff;
}

.fb-li.is-active span {
  overflow: visible;
}

.fb-num.is-row {
  --d: 44;
  top: 50%;
  right: calc(-30 * var(--u));
  transform: translateY(-50%);
}

.fb-right {
  position: relative;
  min-height: calc(395 * var(--u));
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
  background: #fff;
}

.fb-pill {
  position: absolute;
  border-radius: calc(20 * var(--u));
}

.fb-pill.is-ghost {
  top: calc(-10 * var(--u));
  right: calc(105 * var(--u));
  width: calc(130 * var(--u));
  height: calc(24 * var(--u));
  background: #e4e5e7;
}

.fb-pill.is-blue {
  top: calc(30 * var(--u));
  right: calc(36 * var(--u));
  width: calc(110 * var(--u));
  height: calc(40 * var(--u));
  background: #0084ff;
}

.fb-dots {
  position: absolute;
  top: calc(84 * var(--u));
  right: calc(110 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  width: calc(80 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #e4e5e7;
}

.fb-dots b {
  width: calc(10 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #90949c;
}

.fb-title {
  position: relative;
  font-size: var(--fs-sub);
  font-weight: 700;
}

.fb-sub {
  position: relative;
  max-width: calc(250 * var(--u));
  margin: calc(6 * var(--u)) 0 0;
  color: #90949c;
}

.fb-h {
  margin: calc(34 * var(--u)) 0 calc(6 * var(--u));
  font-weight: 700;
}

.fb-link {
  position: relative;
  display: grid;
  /* назва пункту не вужча за найдовше слово, щоб на телефоні «налаштування» не рвалось */
  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto);
  align-items: center;
  column-gap: calc(12 * var(--u));
  min-height: calc(34 * var(--u));
  padding: calc(5 * var(--u)) 0;
  border-top: 1px solid #dddfe2;
}

.fb-link b {
  color: #365899;
}

.fb-link span {
  color: #4b4f56;
}

.fb-num.is-big {
  --d: 60;
  top: 50%;
  right: calc(-48 * var(--u));
  transform: translateY(-50%);
}

/* Розширені функції листування 800×572 */
.fb.is-advanced .fb-frame {
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u));
  background: #fff;
  font-size: var(--fs-txt);
}

.fb.is-advanced .fb-sub {
  max-width: none;
  margin-top: calc(10 * var(--u));
  font-size: var(--fs-cap);
}

.fb-box {
  margin-top: calc(26 * var(--u));
  overflow: hidden;
  border: 1px solid #dddfe2;
  border-radius: calc(4 * var(--u));
}

.fb-opt {
  display: grid;
  grid-template-columns: calc(22 * var(--u)) 1fr auto;
  align-items: start;
  column-gap: calc(14 * var(--u));
  padding: calc(30 * var(--u)) calc(36 * var(--u));
}

.fb-opt + .fb-opt {
  border-top: 1px solid #dddfe2;
}

.fb-opt b {
  display: block;
}

.fb-opt small {
  display: block;
  margin-top: calc(6 * var(--u));
  font-size: var(--fs-cap);
  line-height: 1.4;
  color: #90949c;
}

.fb-radio {
  width: calc(18 * var(--u));
  aspect-ratio: 1;
  margin-top: calc(4 * var(--u));
  border: calc(2 * var(--u)) solid #bec2c9;
  border-radius: 50%;
}

.fb-opt > i {
  font-size: min(calc(18 * var(--u) * var(--tk, 1)), max(calc(18 * var(--u)), 12px));
}

/* «Запит» обведено пурпуровим овалом, як на старому скриншоті */
.fb-request {
  position: relative;
  margin: calc(2 * var(--u)) calc(10 * var(--u)) 0 calc(20 * var(--u));
  color: #4b6aa6;
}

.fb-request::after {
  content: '';
  position: absolute;
  inset: -0.9em -1.4em;
  border: calc(6 * var(--u)) solid #f4f;
  border-radius: 50%;
  transform: rotate(-4deg);
}

.fb-foot {
  display: flex;
  justify-content: flex-end;
  padding: calc(18 * var(--u));
  border-top: 1px solid #dddfe2;
  background: #f5f6f7;
}

.fb-foot span {
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #aac9ff;
  font-weight: 700;
  color: #fff;
}

/* Плейсхолдер ключа заповнює поле на всю ширину, як на старому скриншоті (далі обрізається) */
.st.is-tg .st-input.is-token {
  font-size: min(calc(29 * var(--u) * var(--tk, 1)), max(calc(29 * var(--u)), 12px));
}

.st.is-viber .st-input.is-token {
  font-size: min(calc(46 * var(--u) * var(--tk, 1)), max(calc(46 * var(--u)), 12px));
}

.st-input.is-token {
  justify-content: flex-start;
}


/* ===== «Початок роботи» (/help/getting-started/): створення проекту 1000×548 ===== */
.ws-new {
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.ws-in {
  --u: calc(100cqw / 1000);
  display: grid;
  grid-template-columns: calc(250 * var(--u)) 1fr;
  aspect-ratio: 1000 / 548;
  background: #000;
  color: #fff;
  font-size: max(calc(11 * var(--u)), 9px);
  line-height: 1.35;
}

.ws-side {
  display: flex;
  flex-direction: column;
  padding: calc(8 * var(--u)) calc(13 * var(--u)) calc(12 * var(--u));
}

.ws-ava {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  aspect-ratio: 1;
  margin-bottom: calc(18 * var(--u));
  border: 1px solid #444;
  border-radius: 50%;
  font-size: 1.9em;
  font-weight: 700;
}

.ws-user {
  margin: 0 0 calc(26 * var(--u));
  font-style: italic;
  color: #8b8b8b;
}

.ws-user b {
  display: block;
  font-weight: 400;
  color: #fff;
}

.ws-nav,
.ws-links {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  color: #8b8b8b;
}

.ws-nav .is-active {
  color: #fff;
}

.ws-nav b {
  color: #fff;
}

.ws-out {
  margin: calc(28 * var(--u)) 0 auto;
  color: #8b8b8b;
}

.ws-links {
  gap: calc(9 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.ws-links i {
  margin-left: .3em;
}

.ws-lang {
  display: flex;
  align-self: flex-start;
  border-radius: calc(3 * var(--u));
  overflow: hidden;
}

.ws-lang span {
  padding: calc(5 * var(--u)) calc(18 * var(--u));
  background: #333;
}

.ws-lang .is-active {
  background: #fdf8a6;
  color: #000;
}

.ws-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(18 * var(--u));
}

.ws-title {
  margin: 0 0 calc(70 * var(--u));
  font-size: 1.45em;
  font-weight: 700;
}

.ws-input {
  display: flex;
  align-items: center;
  width: calc(502 * var(--u));
  height: calc(78 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(16 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: calc(12 * var(--u));
  font-size: min(calc(38 * var(--u) * var(--tk, 1)), max(calc(38 * var(--u)), 12px));
}

.ws-input .pl-type {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.ws-input .pl-type.is-typing::after {
  background: #fff;
}

.ws-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(62 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #5a82d8;
  font-size: min(calc(32 * var(--u) * var(--tk, 1)), max(calc(32 * var(--u)), 12px));
}

.ws-plus.pl-tap.is-tap {
  background-color: #3f67c0 !important;
}

/* ===== «Сповіщення» (/help/settings/): налаштування сайту в Chrome ===== */
.chr-pop {
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

.chr-in {
  --u: calc(100cqw / 600);
  position: relative;
  height: calc(520 * var(--u));
  overflow: hidden;
  background: #8a8a8a;
  font-size: min(calc(19 * var(--u) * var(--tk, 1)), max(calc(19 * var(--u)), 12px));
  color: #202124;
}

.chr-tabs {
  display: flex;
  align-items: flex-end;
  height: calc(56 * var(--u));
  padding-left: calc(10 * var(--u));
  background: #dee1e6;
}

.chr-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(320 * var(--u));
  height: calc(46 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  background: #fff;
}

.chr-new {
  margin: 0 0 calc(10 * var(--u)) calc(18 * var(--u));
  font-size: 1.4em;
  line-height: 1;
}

.chr-bar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: #fff;
  box-shadow: 0 1px 0 #dadce0;
}

.chr-bar > i {
  font-size: 1.3em;
  color: #5f6368;
}

.chr-url {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  flex: 1;
  height: calc(40 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #f1f3f4;
  color: #5f6368;
}

.chr-tune {
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 50%;
  background: #dfe1e5;
}

.chr-tune svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.chr-panel {
  position: absolute;
  top: calc(116 * var(--u));
  left: calc(36 * var(--u));
  width: calc(520 * var(--u));
  padding: calc(12 * var(--u)) 0;
  border-radius: calc(10 * var(--u));
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .28);
}

.chr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
  font-size: 1.05em;
}

.chr-head i {
  font-size: 1.2em;
  color: #5f6368;
}

.chr-row {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  min-height: calc(56 * var(--u));
  padding: 0 calc(24 * var(--u));
}

.chr-row > i:first-child {
  width: calc(22 * var(--u));
  text-align: center;
  font-size: 1.25em;
  color: #5f6368;
}

.chr-row > span:nth-child(2) {
  flex: 1;
}

.chr-row.is-link > i:last-child {
  color: #5f6368;
}

.chr-sep {
  height: 1px;
  margin: calc(6 * var(--u)) 0;
  background: #e8eaed;
}

.chr-switch {
  position: relative;
  flex: none;
  width: calc(44 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #0b57d0;
}

.chr-switch::after {
  content: '';
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background: #fff;
}

/* Підказки, як на старому знімку: стрілка до значка і рамка навколо перемикачів */
.chr-arrow {
  position: absolute;
  top: calc(26 * var(--u));
  left: calc(84 * var(--u));
  width: calc(60 * var(--u));
  height: calc(46 * var(--u));
}

.chr-mark {
  position: absolute;
  top: calc(223 * var(--u));
  right: calc(38 * var(--u));
  width: calc(80 * var(--u));
  height: calc(126 * var(--u));
  border: calc(3 * var(--u)) solid #f0f;
  border-radius: calc(10 * var(--u));
}