/* =========================================================
   Билайн 2.0 (data-brand="beeline2")
   Партнёрская раскладка без символики NL: собственные токены,
   светлая и тёмная темы, переработанные поверхности.

   Как это устроено:
   - Раскладку (порядок блоков, сетки, поведение) даёт слой
     [data-design="partner"] выше по файлу — он общий с NL.
   - Этот слой перекрывает цвета и подачу. Он идёт последним,
     специфичность та же, поэтому побеждает.
   - Все цвета — через переменные --b2-*. Тёмная тема меняет
     только их значения, а не правила.
   ========================================================= */

body[data-brand="beeline2"]{
  /* Акцент приходит из JS: настройка точки или пресет бренда. */
  --b2-accent: var(--brand-main, #ffd100);
  --b2-accent-rgb: var(--brand-rgb, 255,209,0);
  --b2-on-accent: var(--brand-on, #111111);

  /* Размер круглой кнопки переключения темы. На мобильных к нему привязана
     высота логотипа, чтобы шапка не разъезжалась при правке одного из двух. */
  --b2-theme-toggle-size: 40px;

  --b2-bg: #ffffff;
  --b2-surface: #ffffff;
  --b2-surface-2: #f4f5f8;
  --b2-surface-3: #e9ebf1;
  --b2-ink: #0d1220;
  --b2-ink-2: #454e60;
  --b2-ink-3: #757e91;
  --b2-line: rgba(13, 18, 32, .12);
  --b2-line-strong: rgba(13, 18, 32, .22);
  --b2-shadow-sm: 0 1px 2px rgba(13, 18, 32, .05), 0 6px 16px rgba(13, 18, 32, .05);
  --b2-shadow: 0 1px 2px rgba(13, 18, 32, .06), 0 14px 34px rgba(13, 18, 32, .08);
  --b2-shadow-lg: 0 2px 4px rgba(13, 18, 32, .07), 0 28px 60px rgba(13, 18, 32, .12);
  --b2-ring: 0 0 0 4px rgba(var(--b2-accent-rgb), .38);
  --b2-radius: 22px;
  --b2-radius-sm: 14px;
  --b2-radius-lg: 28px;

  /* Инверсия карточки тарифа при наведении и выборе. */
  --b2-invert-bg: #10141c;
  --b2-invert-bg-2: #1a202b;
  --b2-invert-ink: #ffffff;
  --b2-invert-ink-2: #c3cad8;

  /* Базовые токены страницы, чтобы неперекрытые правила тоже были в теме. */
  --text: var(--b2-ink);
  --muted: var(--b2-ink-3);
  --border: var(--b2-line);
  --beeline-black: var(--b2-ink);
  --beeline-gray: var(--b2-bg);
  --shadow: var(--b2-shadow);
  --shadow-sm: var(--b2-shadow-sm);
  --radius: var(--b2-radius);
  --radius-sm: var(--b2-radius-sm);
  --focus: var(--b2-ring);

  color: var(--b2-ink);
  /* Плоский фон без градиента. */
  background: var(--b2-bg);
}

body[data-brand="beeline2"][data-theme="dark"]{
  --b2-bg: #0e1116;
  --b2-surface: #161a22;
  --b2-surface-2: #1c2029;
  --b2-surface-3: #242935;
  --b2-ink: #f1f3f8;
  --b2-ink-2: #b7c0d0;
  --b2-ink-3: #8b94a6;
  --b2-line: rgba(255, 255, 255, .12);
  --b2-line-strong: rgba(255, 255, 255, .22);
  --b2-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 6px 16px rgba(0, 0, 0, .32);
  --b2-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 38px rgba(0, 0, 0, .42);
  --b2-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 64px rgba(0, 0, 0, .5);

  /* В тёмной теме инверсия идёт в другую сторону — карточка светлеет. */
  --b2-invert-bg: #2a313f;
  --b2-invert-bg-2: #333b4b;
  --b2-invert-ink: #ffffff;
  --b2-invert-ink-2: #c9d1e0;

  color-scheme: dark;
}

/* Схему объявляем на обоих элементах и в обоих состояниях: браузер спрашивает
   про неё корень документа, а «не задано» на телефоне с тёмной системной темой
   означает тёмные системные контролы поверх светлой страницы. */
html[data-brand="beeline2"][data-theme="dark"]{ color-scheme: dark; }
html[data-brand="beeline2"]:not([data-theme="dark"]),
body[data-brand="beeline2"]:not([data-theme="dark"]){ color-scheme: light; }

/* ---------- Контейнеры ----------
   У Билайн 2.0 страница плоская: без «парящей» карточки, рамок и теней.
   Контент просто ограничен по ширине. */
body[data-brand="beeline2"] .container{
  width: min(1120px, calc(100% - 40px));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body[data-brand="beeline2"] #form-container,
body[data-brand="beeline2"] #consent-container,
body[data-brand="beeline2"] #flow-start-container{
  background: transparent;
  color: var(--b2-ink);
}

body[data-brand="beeline2"] .flow-start-box,
body[data-brand="beeline2"] .consent-box{
  background: transparent;
}

/* ---------- Шапка ----------
   Слева логотип оператора и логотип партнёра, справа действия
   («Активировать номер» + переключатель темы), под ними линия во всю ширину. */
body[data-brand="beeline2"] .consent-header{
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  column-gap: 12px;
  row-gap: 10px;
  min-height: 56px;
  margin: 0 0 22px;
  padding: 10px 0 0;
}

body[data-brand="beeline2"] .brand-logo{
  /* На ПК высота логотипа — 50px. На мобильных ниже он равен кнопке темы. */
  height: 50px;
  /* Партнёрская раскладка (style.css, @media min-width:521px) жёстко задаёт
     логотипу width:32px и object-fit:cover. В шапке Билайн 2.0 это сплющивало
     и обрезало картинку — возвращаем пропорции по высоте. */
  width: auto;
  object-fit: contain;
  order: 1;
}

/* Разделитель между логотипами — тонкая линия вместо символа «|». */
body[data-brand="beeline2"] .brand-collab-separator{
  order: 2;
  width: 1px;
  height: 26px;
  overflow: hidden;
  text-indent: -999px;
  background: var(--b2-line-strong);
  border-radius: 1px;
  color: transparent;
}

body[data-brand="beeline2"] .brand-partner-logo{
  order: 3;
  width: auto;
  max-width: 128px;
  height: 28px;
  object-fit: contain;
}

/* Действия шапки прижаты вправо. */
body[data-brand="beeline2"] .brand-header-actions{
  order: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Заголовки уезжают на свою строку под шапкой.
   position не трогаем: базовый CSS даёт им left:50%, и любое значение кроме
   static сдвигает заголовок вправо на половину ширины. */
body[data-brand="beeline2"] .consent-titles,
body[data-brand="beeline2"] .form-titles{
  order: 5;
  flex: 0 0 100%;
  width: 100%;
  margin-top: 10px;
  padding-top: 18px;
  text-align: center;
}

/* Логотипы показываем как есть: подложка в тёмной теме выглядела наклейкой. */
body[data-brand="beeline2"][data-theme="dark"] .brand-partner-logo,
body[data-brand="beeline2"][data-theme="dark"] .brand-logo{
  padding: 0;
  border-radius: 0;
  background: none;
}

/* ---------- Кикер (настраиваемый текст точки) ---------- */
body[data-brand="beeline2"] .nl-collab-kicker{
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 6px;
  padding: 0 0 12px;
  border: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--b2-ink);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
  animation: none;
}

/* Акцентная черта под кикером — вместо анимированного градиента NL. */
body[data-brand="beeline2"] .nl-collab-kicker::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--b2-accent);
}

/* ---------- Плашки быстрых действий под кикером ----------
   Тёмные карточки на светлой странице — как в приложении билайна; в тёмной
   теме берём поверхности --b2-surface-*, иначе тёмная плашка слилась бы с
   фоном страницы. Состав блока собирает script.js по включённым типам
   заявок, поэтому сетка не завязана на конкретный порядок карточек. */
body[data-brand="beeline2"] .b2-quick-actions{
  --b2-qa-bg: #1d2534;
  --b2-qa-bg-hover: #273143;
  --b2-qa-ink: #ffffff;
  --b2-qa-ink-2: rgba(255, 255, 255, .58);
  --b2-qa-icon-bg: rgba(255, 255, 255, .10);
  --b2-qa-line: rgba(255, 255, 255, .12);

  width: 100%;
  margin: 26px 0 0;
}
body[data-brand="beeline2"] .b2-quick-actions[hidden]{ display: none; }

body[data-brand="beeline2"][data-theme="dark"] .b2-quick-actions{
  /* На тёмном фоне страницы (#0e1116) поверхность surface-2 почти сливается,
     поэтому плашкам даём ступень выше. */
  --b2-qa-bg: var(--b2-surface-3);
  --b2-qa-bg-hover: var(--b2-invert-bg-2);
  --b2-qa-ink: var(--b2-ink);
  --b2-qa-ink-2: var(--b2-ink-3);
  --b2-qa-icon-bg: rgba(255, 255, 255, .07);
  --b2-qa-line: var(--b2-line);
}

body[data-brand="beeline2"] .b2-quick-actions-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Включённых плашек может быть и три: последняя в нечётном ряду занимает
   всю ширину, иначе рядом с ней зияла бы дыра. */
body[data-brand="beeline2"] .b2-quick-card:last-child:nth-child(odd){
  grid-column: 1 / -1;
}

body[data-brand="beeline2"] .b2-quick-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 178px;
  margin: 0;
  padding: 20px 22px 22px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--b2-qa-line);
  border-radius: var(--b2-radius);
  background: var(--b2-qa-bg);
  box-shadow: none;
  color: var(--b2-qa-ink);
  font-family: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
body[data-brand="beeline2"] .b2-quick-card:hover{
  background: var(--b2-qa-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--b2-shadow);
}
body[data-brand="beeline2"] .b2-quick-card:active{ transform: translateY(0); }
body[data-brand="beeline2"] .b2-quick-card:focus-visible{
  outline: none;
  box-shadow: var(--b2-ring);
}

body[data-brand="beeline2"] .b2-quick-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

body[data-brand="beeline2"] .b2-quick-card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--b2-qa-icon-bg);
  color: var(--b2-accent);
}
body[data-brand="beeline2"] .b2-quick-card-icon svg{ width: 23px; height: 23px; }

body[data-brand="beeline2"] .b2-quick-card-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--b2-qa-line);
  border-radius: 50%;
  color: var(--b2-qa-ink);
  opacity: .5;
  transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body[data-brand="beeline2"] .b2-quick-card-arrow svg{ width: 16px; height: 16px; }
body[data-brand="beeline2"] .b2-quick-card:hover .b2-quick-card-arrow{
  opacity: 1;
  transform: translateX(2px);
  border-color: var(--b2-accent);
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}

body[data-brand="beeline2"] .b2-quick-card-title{
  margin-top: auto;
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
body[data-brand="beeline2"] .b2-quick-card-text{
  color: var(--b2-qa-ink-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

@media (max-width: 640px){
  body[data-brand="beeline2"] .b2-quick-actions{ margin-top: 18px; }
  body[data-brand="beeline2"] .b2-quick-actions-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body[data-brand="beeline2"] .b2-quick-card{
    min-height: 0;
    padding: 16px 18px 18px;
  }
  body[data-brand="beeline2"] .b2-quick-card-top{ margin-bottom: 16px; }
  body[data-brand="beeline2"] .b2-quick-card-icon{ width: 38px; height: 38px; border-radius: 12px; }
  body[data-brand="beeline2"] .b2-quick-card-icon svg{ width: 21px; height: 21px; }
  body[data-brand="beeline2"] .b2-quick-card-title{ font-size: 18px; }
  body[data-brand="beeline2"] .b2-quick-card-text{ font-size: 13px; }
}

/* Партнёрская раскладка на широких экранах вынимает список тарифов из потока
   и центрирует его по вертикали (style.css, @media min-width:901px). С блоком
   плашек над ним такой список наезжал бы сверху — возвращаем его в поток, как
   это уже сделано для четырёх и более карточек тарифов. */
body[data-brand="beeline2"] .flow-start-box:has(> #b2-quick-actions:not([hidden])) .nl-tariff-first-step:not([hidden]){
  position: static;
  margin-block: auto;
  padding: 24px 0;
  transform: none;
}

/* Заголовок списка тарифов не должен липнуть к нижнему ряду плашек. */
body[data-brand="beeline2"] .flow-start-box:has(> #b2-quick-actions:not([hidden])) #nl-tariff-first-step > .nl-step-heading{
  margin-top: 18px;
}

/* Список тарифов на главной выключен в настройках точки: от секции остаются
   только кнопки FAQ и «Другие действия», но на широких экранах она всё ещё
   забирала свободное место (margin-block:auto из правила выше), и плашки
   быстрых действий оставались прижатыми к шапке, а под ними зияла пустота.
   Отдаём это место самим плашкам — тогда они встают по центру между шапкой и
   нижним блоком. Телефона это не касается: там всё и так идёт потоком. */
@media (min-width: 901px){
  body[data-brand="beeline2"] .flow-start-box:has(> #b2-quick-actions:not([hidden])):has(> #nl-tariff-first-step[data-start-tariffs="off"]:not([hidden])) > #b2-quick-actions{
    margin-block: auto;
  }

  /* Пустая секция тарифов больше не растягивается и не отбивает верхний
     отступ: её содержимое уезжает вниз вместе с остальным «подвалом». */
  body[data-brand="beeline2"] .flow-start-box:has(> #b2-quick-actions:not([hidden])):has(> #nl-tariff-first-step[data-start-tariffs="off"]:not([hidden])) > #nl-tariff-first-step{
    margin-block: 0;
    padding-top: 0;
  }

  /* Проверка статуса и иконки поддержки прижаты к низу своим margin-top:auto
     (style.css). Оставь мы их, свободное место делилось бы на несколько
     auto-отступов и плашки снова уехали бы вверх. */
  body[data-brand="beeline2"] .flow-start-box:has(> #b2-quick-actions:not([hidden])):has(> #nl-tariff-first-step[data-start-tariffs="off"]:not([hidden])) > .public-status-checker:not([hidden]),
  body[data-brand="beeline2"] .flow-start-box:has(> #b2-quick-actions:not([hidden])):has(> #nl-tariff-first-step[data-start-tariffs="off"]:not([hidden])) > .nl-faq-support-icons:not([hidden]){
    margin-top: 0;
  }
}

/* На телефоне кнопку активации в шапке убираем: она дублирует первую плашку,
   а на своей строке во всю ширину съедала первый экран. На десктопе остаётся. */
@media (max-width: 720px){
  body[data-brand="beeline2"] .nl-direct-activation-btn,
  body[data-brand="beeline2"] #flow-start-container .nl-direct-activation-btn{
    display: none;
  }
}

/* ---------- Кнопка «На главную» в шапке заявки ----------
   Стоит слева от переключателя темы и повторяет его подачу: та же высота,
   та же рамка и фон, чтобы пара читалась как одна группа действий. */
body[data-brand="beeline2"] .b2-header-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  height: var(--b2-theme-toggle-size, 40px);
  padding: 0 15px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--b2-line, rgba(13, 18, 32, .12));
  /* Тот же радиус, что у «Подключить» на карточке тарифа. */
  border-radius: 999px;
  background: var(--b2-surface, #fff);
  box-shadow: none;
  color: var(--b2-ink-2, #454e60);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
body[data-brand="beeline2"] .b2-header-btn svg{
  width: 18px;
  height: 18px;
}
body[data-brand="beeline2"] .b2-header-btn:hover{
  color: var(--b2-ink);
  border-color: var(--b2-line-strong);
}
body[data-brand="beeline2"] .b2-header-btn:active{ transform: scale(.97); }
body[data-brand="beeline2"] .b2-header-btn:focus-visible{
  outline: none;
  box-shadow: var(--b2-ring);
}

/* На телефоне шапка разбирается на элементы сетки (display:contents у
   .brand-header-actions), поэтому кнопке нужен свой порядок; подпись убираем —
   рядом с переключателем темы остаётся такой же круг с домиком. */
@media (max-width: 720px){
  body[data-brand="beeline2"] .b2-header-btn{
    order: 4;
    width: var(--b2-theme-toggle-size, 40px);
    padding: 0;
    border-radius: 999px;
    margin-left: auto;
  }
  body[data-brand="beeline2"] .b2-header-btn span{ display: none; }
  /* «Статус заявки» на телефоне остаётся с подписью: значок лупы сам по себе
     не читается как «проверить статус». */
  body[data-brand="beeline2"] .b2-status-btn{
    width: auto;
    padding: 0 14px;
  }
  body[data-brand="beeline2"] .b2-status-btn span{ display: inline; }
  body[data-brand="beeline2"] .consent-header .b2-header-btn + .theme-toggle{ margin-left: 0; }
}

/* ---------- Фон: пчелиные соты ----------
   Бесшовная гексагональная плитка 114×66 px в data-URI: сторона 38 px,
   шаг решётки 3a × √3a, поэтому узор стыкуется сам с собой. Рисуем фоновой
   картинкой поверх --b2-bg (background-image всегда выше background-color) и
   не трогаем разметку — откатывается удалением этого блока.
   Прозрачность подобрана так, чтобы соты читались только на пустых участках:
   карточки и поля перекрывают их своим фоном. */
body[data-brand="beeline2"]{
  --b2-honeycomb: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22114%22%20height%3D%2265.8179%22%20viewBox%3D%220%200%20114%2065.8179%22%3E%3Cpath%20d%3D%22M-38%2C0L-19%2C-32.9089L19%2C-32.9089L38%2C0L19%2C32.9089L-19%2C32.9089ZM76%2C0L95%2C-32.9089L133%2C-32.9089L152%2C0L133%2C32.9089L95%2C32.9089ZM-38%2C65.8179L-19%2C32.909L19%2C32.909L38%2C65.8179L19%2C98.7268L-19%2C98.7268ZM76%2C65.8179L95%2C32.909L133%2C32.909L152%2C65.8179L133%2C98.7268L95%2C98.7268ZM19%2C32.9089L38%2C0L76%2C0L95%2C32.9089L76%2C65.8178L38%2C65.8178Z%22%20fill%3D%22none%22%20stroke%3D%22rgba(13%2C18%2C32%2C0.055)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

body[data-brand="beeline2"][data-theme="dark"]{
  --b2-honeycomb: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22114%22%20height%3D%2265.8179%22%20viewBox%3D%220%200%20114%2065.8179%22%3E%3Cpath%20d%3D%22M-38%2C0L-19%2C-32.9089L19%2C-32.9089L38%2C0L19%2C32.9089L-19%2C32.9089ZM76%2C0L95%2C-32.9089L133%2C-32.9089L152%2C0L133%2C32.9089L95%2C32.9089ZM-38%2C65.8179L-19%2C32.909L19%2C32.909L38%2C65.8179L19%2C98.7268L-19%2C98.7268ZM76%2C65.8179L95%2C32.909L133%2C32.909L152%2C65.8179L133%2C98.7268L95%2C98.7268ZM19%2C32.9089L38%2C0L76%2C0L95%2C32.9089L76%2C65.8178L38%2C65.8178Z%22%20fill%3D%22none%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.05)%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

/* Фон точки — только цвет. Сам узор и подсветка живут в двух фиксированных
   слоях ниже: так они гарантированно совпадают друг с другом при прокрутке.
   Вариант «узор фоном body + background-attachment: fixed» отпадает — iOS
   Safari фиксированное вложение фона игнорирует, узор уезжал бы при скролле
   вместе с документом, а подсветка оставалась на месте, и соты двоились бы. */
body[data-brand="beeline2"],
body.success-page[data-brand="beeline2"]{
  background-color: var(--b2-bg);
}

/* ---------- Фон: сам узор ----------
   Плитка 114×66 из --b2-honeycomb, привязана к окну (position: fixed).
   z-index: -2 кладёт слой над фоном страницы (фон body уходит на канву, а она
   рисуется ниже отрицательных z-index), но под подсветкой и под всем
   содержимым. Разметку не трогаем, клики не перехватываем. */
body[data-brand="beeline2"]::before,
body.success-page[data-brand="beeline2"]::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--b2-honeycomb);
  background-repeat: repeat;
  background-position: center -6px;
}

/* ---------- Мерцание сот ----------
   Соты подсвечиваются мягким градиентом акцентного цвета точки
   (--b2-accent-rgb), то есть всегда «в цвет темы», а не захардкоженным жёлтым.
   На телефонах градиент медленно бегает сам, на десктопе подсветка следует за
   курсором (см. ниже и /lib/b2-honeycomb-glow.js).

   Слой целиком залит градиентом и обрезан маской из той же плитки сот
   (--b2-honeycomb-mask — тот же путь, но с непрозрачной обводкой: маска
   смотрит только на альфа-канал, полупрозрачная дала бы едва заметный
   эффект). Размер и смещение маски обязаны совпадать с узором на ::before
   (center -6px), иначе блик пойдёт по своим линиям.

   Яркость намеренно низкая: базовая обводка сот — альфа 0.055, так что на
   пике линия становится чуть теплее, а не подсвечивается. */
body[data-brand="beeline2"]{
  --b2-honeycomb-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22114%22%20height%3D%2265.8179%22%20viewBox%3D%220%200%20114%2065.8179%22%3E%3Cpath%20d%3D%22M-38%2C0L-19%2C-32.9089L19%2C-32.9089L38%2C0L19%2C32.9089L-19%2C32.9089ZM76%2C0L95%2C-32.9089L133%2C-32.9089L152%2C0L133%2C32.9089L95%2C32.9089ZM-38%2C65.8179L-19%2C32.909L19%2C32.909L38%2C65.8179L19%2C98.7268L-19%2C98.7268ZM76%2C65.8179L95%2C32.909L133%2C32.909L152%2C65.8179L133%2C98.7268L95%2C98.7268ZM19%2C32.9089L38%2C0L76%2C0L95%2C32.9089L76%2C65.8178L38%2C65.8178Z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

body[data-brand="beeline2"]::after,
body.success-page[data-brand="beeline2"]::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(115deg,
    rgba(var(--b2-accent-rgb), 0) 10%,
    rgba(var(--b2-accent-rgb), .95) 24%,
    rgba(var(--b2-accent-rgb), 0) 38%,
    rgba(var(--b2-accent-rgb), 0) 62%,
    rgba(var(--b2-accent-rgb), .75) 76%,
    rgba(var(--b2-accent-rgb), 0) 90%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--b2-honeycomb-mask);
  mask-image: var(--b2-honeycomb-mask);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: center -6px;
  mask-position: center -6px;
  /* alternate + ease-in-out: градиент плавно уходит и возвращается, без рывка
     на стыке цикла, который был бы заметен у infinite без реверса. */
  animation: b2-honeycomb-shimmer 22s ease-in-out infinite alternate;
}

/* На тёмном фоне тот же блик читается слабее — чуть поднимаем. */
body[data-brand="beeline2"][data-theme="dark"]::after,
body.success-page[data-brand="beeline2"][data-theme="dark"]::after{
  opacity: .18;
}

@keyframes b2-honeycomb-shimmer{
  from{ background-position: 0% 50%; }
  to{ background-position: 100% 50%; }
}

/* Десктоп: вместо бегущего градиента — пятно света под курсором.
   Класс b2-cursor-glow ставит скрипт, поэтому без JS (или пока мышь не
   двигали) остаётся бегущий градиент, а не мёртвый экран. Координаты
   приходят в --b2-hc-x / --b2-hc-y в пикселях окна: слой fixed inset:0,
   так что clientX/clientY ложатся в него один в один.
   Видимость включает b2-cursor-inside: курсор ушёл за пределы окна —
   подсветка плавно гаснет через transition opacity. */
@media (hover: hover) and (pointer: fine){
  body[data-brand="beeline2"].b2-cursor-glow::after,
  body.success-page[data-brand="beeline2"].b2-cursor-glow::after{
    animation: none;
    background-image: radial-gradient(circle 320px at var(--b2-hc-x, 50%) var(--b2-hc-y, 50%),
      rgba(var(--b2-accent-rgb), 1) 0%,
      rgba(var(--b2-accent-rgb), .75) 30%,
      rgba(var(--b2-accent-rgb), .28) 60%,
      rgba(var(--b2-accent-rgb), 0) 100%);
    background-size: auto;
    background-position: 0 0;
    opacity: 0;
    transition: opacity .45s ease;
  }
  body[data-brand="beeline2"].b2-cursor-glow.b2-cursor-inside::after{ opacity: .16; }
  body[data-brand="beeline2"][data-theme="dark"].b2-cursor-glow.b2-cursor-inside::after{ opacity: .24; }
}

/* Глобальное правило prefers-reduced-motion ниже описано через `body[...] *`,
   а это — псевдоэлемент самого body, так что гасим его отдельно. Оставлять
   застывший градиент нельзя: он читался бы как грязное пятно на узоре.
   Сам узор (::before) при этом остаётся — он статичен. */
@media (prefers-reduced-motion: reduce){
  body[data-brand="beeline2"]::after,
  body.success-page[data-brand="beeline2"]::after{ display: none; }
}

/* При печати фиксированные слои браузеры повторяют на каждой странице — убираем. */
@media print{
  body[data-brand="beeline2"]::before,
  body[data-brand="beeline2"]::after,
  body.success-page[data-brand="beeline2"]::before,
  body.success-page[data-brand="beeline2"]::after{ display: none; }
}

/* На очень узких экранах плитка мельчает вместе с масштабом — оставляем как есть. */

/* В тёмной теме кнопки шапки обводим акцентом: серая рамка на тёмном фоне
   почти не читалась. Цвет берём из акцента точки, а не из константы. */
body[data-brand="beeline2"][data-theme="dark"] .theme-toggle,
body[data-brand="beeline2"][data-theme="dark"] .b2-status-btn{
  border-color: var(--b2-accent);
}
body[data-brand="beeline2"][data-theme="dark"] .theme-toggle:hover,
body[data-brand="beeline2"][data-theme="dark"] .b2-status-btn:hover{
  border-color: var(--b2-accent);
  background: rgba(var(--b2-accent-rgb), .14);
  color: var(--b2-ink);
}

body[data-brand="beeline2"] .b2-header-btn[hidden]{ display: none; }

/* Докрутка по кнопке «Статус заявки» — подсвечиваем блок, иначе на длинной
   странице непонятно, куда именно приехали. */
body[data-brand="beeline2"] .public-status-checker{
  transition: border-color .25s ease, box-shadow .25s ease;
}
body[data-brand="beeline2"] .public-status-checker.is-highlighted{
  border-color: var(--b2-accent);
  box-shadow: 0 0 0 4px rgba(var(--b2-accent-rgb), .20);
}

/* =========================================================
   Заказ SIM: выбор номеров в тёмной теме
   Раскладка задаёт этому блоку цвета константами (#fff, #10182b, #FED305,
   бледно-жёлтые заливки выбранного). На тёмном фоне это давало невидимый
   заголовок, «оливковые» плашки — жёлтый с прозрачностью поверх тёмной
   поверхности — и кричащую жёлтую полосу брони.
   ========================================================= */

/* Заголовок «Выбранные номера и тарифы» (::before у блока в режиме визита
   в офис) был захардкожен тёмно-синим. */
body[data-brand="beeline2"] .delivery-number-group.is-office-visit::before{
  color: var(--b2-ink);
}

/* Сама карточка этого режима (и блок переноса номера рядом) залита в раскладке
   белым — в тёмной теме это светлый прямоугольник во весь блок. Правило
   раскладки идёт по body[data-design="partner"], поэтому селектор с брендом
   его перекрывает. */
body[data-brand="beeline2"] .delivery-number-group.is-office-visit,
body[data-brand="beeline2"] .office-visit-mnp-fields{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}

/* Выбранный номер и выбранный тариф: вместо жёлтой полупрозрачной заливки —
   обычная поверхность с акцентным кольцом. Прозрачный жёлтый поверх тёмного
   даёт грязный оливковый, а кольцо читается однозначно. */
body[data-brand="beeline2"][data-theme="dark"] .delivery-method-card:has(input:checked),
body[data-brand="beeline2"][data-theme="dark"] .delivery-number-option.selected,
body[data-brand="beeline2"][data-theme="dark"] .delivery-number-option[aria-pressed="true"],
body[data-brand="beeline2"][data-theme="dark"] .delivery-item-tariff-option.is-selected{
  border-color: var(--b2-accent);
  background: var(--b2-surface-3);
  box-shadow: inset 0 0 0 1px var(--b2-accent);
  color: var(--b2-ink);
}

/* Бейдж типа расчёта: тем же приёмом — акцентный текст на слабой заливке. */
body[data-brand="beeline2"][data-theme="dark"] .delivery-item-tariff-billing,
body[data-brand="beeline2"][data-theme="dark"] .nl-selected-tariff-billing{
  background: var(--b2-surface-3);
  color: var(--b2-accent);
}

/* Полоса брони: в светлой теме это фирменная жёлтая плашка, в тёмной такой
   прямоугольник бьёт по глазам — оставляем акцент рамкой и таймером. */
body[data-brand="beeline2"][data-theme="dark"] .delivery-reservation-status{
  border: 1px solid var(--b2-accent);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"][data-theme="dark"] .delivery-reservation-status strong{
  color: var(--b2-accent);
}
body[data-brand="beeline2"][data-theme="dark"] .delivery-reservation-status.is-expired{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-3);
}

/* Поля переноса номера при визите в офис — в раскладке белые. */
body[data-brand="beeline2"] .office-visit-mnp-fields{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}

body[data-brand="beeline2"] .consent-titles h1,
body[data-brand="beeline2"] .form-titles h1,
body[data-brand="beeline2"] .success-titles .page-title{
  color: var(--b2-ink);
  font-weight: 800;
  letter-spacing: -.03em;
}

body[data-brand="beeline2"] .consent-titles h2,
body[data-brand="beeline2"] .form-titles h2{
  color: var(--b2-ink-2);
  font-weight: 500;
}

/* ---------- Переключатель темы ----------
   Живёт в шапке рядом с кнопкой действия, поэтому обычный inline-элемент. */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--b2-theme-toggle-size, 40px);
  height: var(--b2-theme-toggle-size, 40px);
  padding: 0;
  border: 1px solid var(--b2-line, rgba(13, 18, 32, .12));
  border-radius: 999px;
  background: var(--b2-surface, #fff);
  color: var(--b2-ink-2, #454e60);
  box-shadow: none;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.theme-toggle[hidden]{ display: none; }
.theme-toggle:hover{
  color: var(--b2-ink, #0d1220);
  border-color: var(--b2-line-strong, rgba(13, 18, 32, .22));
}
.theme-toggle:active{ transform: scale(.94); }
.theme-toggle:focus-visible{
  outline: 3px solid rgba(var(--b2-accent-rgb, 255,209,0), .55);
  outline-offset: 2px;
}
.theme-toggle-icon{
  width: 20px;
  height: 20px;
  display: none;
}
/* В светлой теме показываем луну (что произойдёт по клику), в тёмной — солнце. */
body:not([data-theme="dark"]) .theme-toggle-icon--moon{ display: block; }
body[data-theme="dark"] .theme-toggle-icon--moon{ display: none; }
body[data-theme="dark"] .theme-toggle-icon--sun{ display: block; }

/* ---------- Кнопки ---------- */
body[data-brand="beeline2"] .beeline-btn,
body[data-brand="beeline2"] .btn-primary,
body[data-brand="beeline2"] .nl-direct-activation-btn,
body[data-brand="beeline2"] .nl-tariff-connect{
  border: 0;
  border-radius: 999px;
  background: var(--b2-accent);
  color: var(--b2-on-accent);
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 8px 20px rgba(var(--b2-accent-rgb), .30);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body[data-brand="beeline2"] .beeline-btn:hover,
body[data-brand="beeline2"] .btn-primary:hover,
body[data-brand="beeline2"] .nl-direct-activation-btn:hover,
body[data-brand="beeline2"] .nl-tariff-connect:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 26px rgba(var(--b2-accent-rgb), .38);
}
body[data-brand="beeline2"] .beeline-btn:active,
body[data-brand="beeline2"] .btn-primary:active,
body[data-brand="beeline2"] .nl-direct-activation-btn:active,
body[data-brand="beeline2"] .nl-tariff-connect:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(var(--b2-accent-rgb), .30);
}
/* Подпись внутри кнопки («Выбрать файл» → «Фото SIM-карты»): общее правило
   .hint/.hint2 красит её в приглушённый --b2-ink-3, а на заливке кнопки это
   не читается — в тёмной теме особенно, там ink-3 светло-серый.
   Именно inherit, а не конкретный цвет: кнопка меняет цвет текста в четырёх
   состояниях (акцент, чёрная на наведении, жёлтая на тач-устройствах,
   выключенная), и подпись должна следовать за ней сама. Отличие от основной
   надписи держим прозрачностью. */
body[data-brand="beeline2"] .beeline-btn .hint,
body[data-brand="beeline2"] .beeline-btn .hint2,
body[data-brand="beeline2"] .btn-primary .hint,
body[data-brand="beeline2"] .btn-primary .hint2{
  color: inherit;
  opacity: .78;
}

/* Вторичное действие («Назад», «Очистить», «Изменить подпись») партнёрская
   раскладка заливает тем же жёлтым, что и основное, — две одинаково яркие
   кнопки рядом спорят за внимание. Здесь вторичная становится контурной.
   Состояния :hover/:active/:focus повторяют форму правила из style.css для
   .nl-touch-input (те же :is()/:not()) — специфичность обязана совпасть,
   иначе на тач-устройствах кнопка снова заливается жёлтым при касании. */
body[data-brand="beeline2"] .beeline-btn.secondary,
body[data-brand="beeline2"] .beeline-btn.secondary:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]){
  border: 1px solid var(--b2-line-strong);
  background: transparent;
  color: var(--b2-ink-2);
  box-shadow: none;
  filter: none;
}
body[data-brand="beeline2"] .beeline-btn.secondary:is(:hover, :focus-visible):not(.active):not([aria-pressed="true"]){
  border-color: var(--b2-ink-3);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}

/* Кнопка «Изменить город» — то же второстепенное действие, что и «Показать
   другие номера», но своего класса .beeline-btn у неё нет: раскладка красит её
   салатовым (#f5f8bd), и рядом с контурной кнопкой это смотрелось как две
   разные системы. Повторяем контурный вид: скруглением и высотой она остаётся
   компактнее — это подпись под полем, а не полноразмерная кнопка. */
body[data-brand="beeline2"] .delivery-change-city-btn{
  border: 1px solid var(--b2-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--b2-ink-2);
  box-shadow: none;
}
/* Название города — второй по важности элемент внутри кнопки, поэтому
   держим его приглушённым, как подпись. */
body[data-brand="beeline2"] .delivery-change-city-btn span:first-child{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .delivery-change-city-btn:is(:hover, :focus-visible){
  border-color: var(--b2-ink-3);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-change-city-btn:is(:hover, :focus-visible) span:first-child{
  color: var(--b2-ink-2);
}

body[data-brand="beeline2"] .beeline-btn:disabled,
body[data-brand="beeline2"] .btn-primary:disabled{
  background: var(--b2-surface-3);
  color: var(--b2-ink-3);
  box-shadow: none;
  transform: none;
  filter: none;
}

body[data-brand="beeline2"] .btn-secondary,
body[data-brand="beeline2"] .file-upload-btn,
body[data-brand="beeline2"] .nl-other-actions-btn,
body[data-brand="beeline2"] .nl-change-tariff-btn,
body[data-brand="beeline2"] .nl-form-change-tariff-btn,
body[data-brand="beeline2"] .nl-direct-back-btn,
body[data-brand="beeline2"] .nl-tariff-tune{
  border: 1px solid var(--b2-line-strong);
  border-radius: 999px;
  background: var(--b2-surface);
  color: var(--b2-ink);
  font-weight: 600;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
body[data-brand="beeline2"] .btn-secondary:hover,
body[data-brand="beeline2"] .file-upload-btn:hover,
body[data-brand="beeline2"] .nl-other-actions-btn:hover,
body[data-brand="beeline2"] .nl-change-tariff-btn:hover,
body[data-brand="beeline2"] .nl-form-change-tariff-btn:hover,
body[data-brand="beeline2"] .nl-direct-back-btn:hover,
body[data-brand="beeline2"] .nl-tariff-tune:hover{
  background: var(--b2-surface-2);
  border-color: var(--b2-accent);
  transform: translateY(-1px);
}

/* Обводка фокуса: партнёрская раскладка рисует её лаймом NL — переводим на
   акцент точки. Селекторы повторяют форму исходных правил, чтобы перекрыть их. */
body[data-brand="beeline2"] button:focus-visible,
body[data-brand="beeline2"] a:focus-visible,
body[data-brand="beeline2"] input:focus-visible,
body[data-brand="beeline2"] select:focus-visible,
body[data-brand="beeline2"] textarea:focus-visible{
  outline: 3px solid rgba(var(--b2-accent-rgb), .55);
  outline-offset: 2px;
  box-shadow: none;
}
body[data-brand="beeline2"] .beeline-btn:focus-visible,
body[data-brand="beeline2"] .btn-primary:focus-visible,
body[data-brand="beeline2"] .btn-secondary:focus-visible,
body[data-brand="beeline2"] .file-upload-btn:focus-visible,
body[data-brand="beeline2"] .nl-direct-activation-btn:focus-visible,
body[data-brand="beeline2"] .nl-tariff-connect:focus-visible,
body[data-brand="beeline2"] .delivery-change-city-btn:focus-visible,
body[data-brand="beeline2"] .consent-confirmation-row input[type="checkbox"]:focus-visible,
body[data-brand="beeline2"] .mnp-consent-box input[type="checkbox"]:focus-visible{
  outline: 3px solid rgba(var(--b2-accent-rgb), .55);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Поля ввода ---------- */
body[data-brand="beeline2"] input[type="text"],
body[data-brand="beeline2"] input[type="tel"],
body[data-brand="beeline2"] input[type="email"],
body[data-brand="beeline2"] input[type="number"],
body[data-brand="beeline2"] input[type="date"],
body[data-brand="beeline2"] input[type="search"],
body[data-brand="beeline2"] select,
body[data-brand="beeline2"] textarea{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius-sm);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
body[data-brand="beeline2"] input::placeholder,
body[data-brand="beeline2"] textarea::placeholder{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] input:focus,
body[data-brand="beeline2"] select:focus,
body[data-brand="beeline2"] textarea:focus{
  border-color: var(--b2-accent);
  background: var(--b2-surface);
  outline: none;
}
body[data-brand="beeline2"] .form-group label,
body[data-brand="beeline2"] label{
  color: var(--b2-ink-2);
}
/* Кнопка выбора файла — это <label> внутри .form-group, и правило выше
   («подпись поля») специфичнее, чем .beeline-btn: текст кнопки красился
   в цвет подписи, а на жёлтом фоне это не читается — в тёмной теме особенно,
   там ink-2 светло-серый. У <button> той же проблемы нет, поэтому расходились
   соседние кнопки одного вида. */
body[data-brand="beeline2"] .form-group label.beeline-btn,
body[data-brand="beeline2"] .form-group label.btn-primary,
body[data-brand="beeline2"] label.beeline-btn{
  color: var(--b2-on-accent);
}
/* На наведении и нажатии партнёрская раскладка заливает кнопку чёрным и
   делает текст белым — но правило выше специфичнее, и надпись оставалась
   тёмной на чёрном. Повторяем состояния отдельно.
   Тач-устройств это не касается: там правило .nl-touch-input (специфичность
   выше) держит кнопку жёлтой с тёмным текстом, и белый здесь был бы ошибкой. */
body[data-brand="beeline2"] .form-group label.beeline-btn:is(:hover, :active, :focus-visible),
body[data-brand="beeline2"] .form-group label.btn-primary:is(:hover, :active, :focus-visible),
body[data-brand="beeline2"] label.beeline-btn:is(:hover, :active, :focus-visible){
  color: #ffffff;
}
body[data-brand="beeline2"] .hint{
  color: var(--b2-ink-3);
}

/* ---------- Карточки выбора (тип заявки) ----------
   Партнёрский слой красит их белым, в том числе через :nth-child, и
   инвертирует в чёрный при наведении. Повторяем те же селекторы. */
body[data-brand="beeline2"] .flow-card,
body[data-brand="beeline2"] .flow-card:nth-child(3n + 1),
body[data-brand="beeline2"] .flow-card:nth-child(3n + 2),
body[data-brand="beeline2"] .flow-card:nth-child(3n){
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
}
body[data-brand="beeline2"] .flow-card-title{
  color: var(--b2-ink);
  font-weight: 700;
  letter-spacing: -.02em;
}
body[data-brand="beeline2"] .flow-card-text{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .flow-card:hover,
body[data-brand="beeline2"] .flow-card:active,
body[data-brand="beeline2"] .flow-card.active,
body[data-brand="beeline2"] .flow-card.selected,
body[data-brand="beeline2"] .flow-card[aria-pressed="true"]{
  border-color: var(--b2-invert-bg);
  background: var(--b2-invert-bg);
  color: var(--b2-invert-ink);
}
body[data-brand="beeline2"] .flow-card:hover .flow-card-title,
body[data-brand="beeline2"] .flow-card:active .flow-card-title,
body[data-brand="beeline2"] .flow-card.active .flow-card-title,
body[data-brand="beeline2"] .flow-card.selected .flow-card-title,
body[data-brand="beeline2"] .flow-card[aria-pressed="true"] .flow-card-title{
  color: var(--b2-invert-ink);
}
body[data-brand="beeline2"] .flow-card:hover .flow-card-text,
body[data-brand="beeline2"] .flow-card:active .flow-card-text,
body[data-brand="beeline2"] .flow-card.active .flow-card-text,
body[data-brand="beeline2"] .flow-card.selected .flow-card-text,
body[data-brand="beeline2"] .flow-card[aria-pressed="true"] .flow-card-text{
  color: var(--b2-invert-ink-2);
}

/* ---------- Чипы выбранного тарифа в шапке шага ---------- */
body[data-brand="beeline2"] .nl-flow-tariff-label{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .nl-flow-tariff-name{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-flow-tariff-detail{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-flow-tariff-detail strong{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-flow-tariff-billing,
body[data-brand="beeline2"] .nl-flow-tariff-price{
  border-color: var(--b2-accent);
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}
body[data-brand="beeline2"] .nl-flow-tariff-price strong{
  color: var(--b2-on-accent);
}

/* ---------- Карточки тарифов ---------- */
body[data-brand="beeline2"] .tariff-card,
body[data-brand="beeline2"] .nl-start-tariff-card{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface);
  color: var(--b2-ink);
  box-shadow: var(--b2-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body[data-brand="beeline2"] .tariff-card:hover,
body[data-brand="beeline2"] .nl-start-tariff-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--b2-shadow);
  border-color: var(--b2-line-strong);
}
body[data-brand="beeline2"] .tariff-card.selected,
body[data-brand="beeline2"] .nl-start-tariff-card.selected{
  border-color: var(--b2-accent);
  background: var(--b2-surface);
  box-shadow: var(--b2-shadow), 0 0 0 2px rgba(var(--b2-accent-rgb), .45) inset;
}
body[data-brand="beeline2"] .tariff-name,
body[data-brand="beeline2"] .tariff-title,
body[data-brand="beeline2"] .nl-tariff-card-headline{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-meta,
body[data-brand="beeline2"] .tariff-submeta,
body[data-brand="beeline2"] .nl-tariff-card-audience,
body[data-brand="beeline2"] .tariff-metric-unit,
body[data-brand="beeline2"] .tariff-price-unit{
  color: var(--b2-ink-3);
}
/* Собственный фон нужен только телу карточки. У .tariff-metric и
   .nl-tariff-summary это просто строки текста: своя подложка не давала им
   инвертироваться вместе с карточкой и оставляла светлую полосу. */
body[data-brand="beeline2"] .nl-tariff-card-body{
  background: var(--b2-surface-2);
  border-color: var(--b2-line);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-metric,
body[data-brand="beeline2"] .nl-tariff-summary{
  background: transparent;
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-metric-value,
body[data-brand="beeline2"] .tariff-price-value{
  color: var(--b2-ink);
  font-weight: 800;
}
body[data-brand="beeline2"] .tariff-badge{
  background: rgba(var(--b2-accent-rgb), .18);
  color: var(--b2-ink);
  border: 1px solid rgba(var(--b2-accent-rgb), .45);
}
body[data-brand="beeline2"] .nl-start-tariff-card.is-hit{
  border-color: rgba(var(--b2-accent-rgb), .55);
}
body[data-brand="beeline2"] .nl-start-tariff-card.is-hit .tariff-badge{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}
/* Иконки безлимитов оставляем фирменных цветов сервисов: они приходят
   переменными из public/lib/tariff-unlimited-icons.js. Раньше здесь стоял
   монохромный фон — с семью разными сервисами кружки стали бы неразличимы. */
body[data-brand="beeline2"] .nl-tariff-unlimited-icon{
  background: var(--unlimited-icon-bg, var(--b2-surface-3));
  color: var(--unlimited-icon-ink, #fff);
}
body[data-brand="beeline2"] .nl-tariff-unlimited-copy,
body[data-brand="beeline2"] .nl-tariff-info{
  color: var(--b2-ink-2);
}

/* ---------- Карточка тарифа стартового экрана ----------
   Слой партнёрской раскладки задаёт этой карточке цвета константами и
   селекторами вида `.tariff-card.nl-start-tariff-card <потомок>`. Чтобы
   перекрыть их, повторяем ту же форму селектора: специфичность совпадает,
   а этот файл подключается позже. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card{
  border: 0;
  border-radius: 30px;
  background: var(--b2-surface-3);
  color: var(--b2-ink);
  box-shadow: inset 0 0 0 1px var(--b2-line);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-card-body{
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-name,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-summary,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-price,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-price-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-price-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-metric,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-metric-value{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-card-audience,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-beeline-unlimited,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-unlimited-copy,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-metric-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-metric-empty{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-meta{
  background: var(--b2-surface-2);
  box-shadow: inset 0 0 0 1px var(--b2-line);
}
/* Чип типа тарификации («monthly») — второстепенный, акцент оставляем метке «ХИТ». */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-badge{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .nl-tariff-hit-badge{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-connect{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
  text-transform: none;
  font-size: 14px;
  letter-spacing: -.01em;
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-tune{
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
  border: 1px solid var(--b2-line);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .nl-tariff-info{
  background: var(--b2-ink-3);
  color: var(--b2-surface);
}

/* Наведение и выбор: карточка инвертируется целиком.
   В style.css два блока таких правил (около строк 2641 и 3193), и красят они
   каждый элемент по отдельности — поэтому здесь перечислены все потомки,
   иначе часть текста остаётся в старом цвете. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected{
  border: 0;
  background: var(--b2-invert-bg);
  color: var(--b2-invert-ink);
  box-shadow: var(--b2-shadow);
}

body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-card-body,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-card-body,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-card-body{
  background: var(--b2-invert-bg-2);
  color: var(--b2-invert-ink);
}

body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-meta,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-meta,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-meta{
  background: var(--b2-invert-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--b2-accent-rgb), .34);
}

/* Основной текст карточки. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-name,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-name,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-name,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-summary,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-summary,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-summary,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-card-headline,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-card-headline,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-card-headline,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-title,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-title,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-title,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-metric,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-metric,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-metric,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-metric-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-metric-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-metric-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-price,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-price,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-price,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-price-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-price-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-price-value{
  color: var(--b2-invert-ink);
}

/* Второстепенный текст: подписи, единицы, пояснения. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-metric-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-metric-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-metric-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-metric-empty,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-metric-empty,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-metric-empty,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-price-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-price-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-price-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-submeta,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-submeta,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-submeta,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-card-audience,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-card-audience,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-card-audience,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-beeline-unlimited,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-beeline-unlimited,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-beeline-unlimited,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-unlimited-copy,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-unlimited-copy,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-unlimited-copy,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-info,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-info,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-info{
  color: var(--b2-invert-ink-2);
}

/* Чип тарификации остаётся спокойным и на инверсии. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-badge,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-badge,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-badge{
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: var(--b2-invert-ink-2);
}

/* Кнопка подключения и метка «ХИТ» держат акцент точки. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-connect,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-connect,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-connect,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-hit-badge,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-hit-badge,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-hit-badge{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}

body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .nl-tariff-tune,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .nl-tariff-tune,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .nl-tariff-tune{
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .12);
  color: var(--b2-invert-ink);
}

/* Хитовый тариф выделяется акцентом точки, а не лаймом NL. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.is-hit{
  box-shadow: inset 0 0 0 2px var(--b2-accent);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.is-hit:hover,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.is-hit:focus-visible,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.is-hit.selected{
  box-shadow: inset 0 0 0 3px var(--b2-accent), var(--b2-shadow);
}

/* ---------- Случайное касание на телефоне ----------
   На тач-устройствах :hover/:active/:focus залипают после касания, поэтому
   партнёрская раскладка гасит инверсию правилами `.nl-touch-input` в style.css
   (около строки 3834). Но гасит она её в свои светлые константы (#E3E7EF,
   #fff, #FED305), и в тёмной теме карточка от случайного касания вспыхивала
   белым. Повторяем ту же форму селектора — :is()/:not() и число классов
   обязаны совпасть, — и возвращаем цвета темы; этот файл подключается позже,
   поэтому при равной специфичности выигрывает он.
   Инверсия при наведении мышью не трогается: у правил ниже есть `.nl-touch-input`
   либо медиазапрос тач-экрана. То же лечение уже сделано для .flow-card ниже. */
body[data-brand="beeline2"].nl-touch-input .tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
  border: 0;
  background: var(--b2-surface-3);
  color: var(--b2-ink);
  box-shadow: inset 0 0 0 1px var(--b2-line);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card.is-hit:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
  box-shadow: inset 0 0 0 2px var(--b2-accent);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .nl-tariff-card-body{
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .tariff-meta{
  background: var(--b2-surface-2);
  box-shadow: inset 0 0 0 1px var(--b2-line);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) :is(
  .tariff-name,
  .nl-tariff-summary,
  .nl-tariff-card-headline,
  .tariff-title,
  .tariff-metric,
  .tariff-metric-value,
  .tariff-price,
  .tariff-price-value
){
  color: var(--b2-ink);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) :is(
  .nl-tariff-card-audience,
  .nl-tariff-beeline-unlimited,
  .nl-tariff-unlimited-copy,
  .nl-tariff-info,
  .tariff-submeta,
  .tariff-price-unit,
  .tariff-metric-unit,
  .tariff-metric-empty
){
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .tariff-badge{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .nl-tariff-connect{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}
body[data-brand="beeline2"].nl-touch-input .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .nl-tariff-tune{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}

/* Тот же набор для настоящих тач-экранов: в style.css эти правила лежат ещё и
   в @media (hover:none), (pointer:coarse) — там класса .nl-touch-input может
   не быть (первое касание страницы), поэтому повторяем их и внутри медиа.
   Селекторы без .nl-touch-input: специфичность совпадает с партнёрскими,
   а этот файл подключается позже. */
@media (hover:none), (pointer:coarse){
  body[data-brand="beeline2"] .tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
    border-color: var(--b2-line);
    background: var(--b2-surface-2);
    color: var(--b2-ink);
    box-shadow: none;
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
    border: 0;
    background: var(--b2-surface-3);
    color: var(--b2-ink);
    box-shadow: inset 0 0 0 1px var(--b2-line);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.is-hit:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
    box-shadow: inset 0 0 0 2px var(--b2-accent);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .nl-tariff-card-body{
    background: var(--b2-surface);
    color: var(--b2-ink);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .tariff-meta{
    background: var(--b2-surface-2);
    box-shadow: inset 0 0 0 1px var(--b2-line);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) :is(
    .tariff-name,
    .nl-tariff-summary,
    .nl-tariff-card-headline,
    .tariff-title,
    .tariff-metric,
    .tariff-metric-value,
    .tariff-price,
    .tariff-price-value
  ){
    color: var(--b2-ink);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) :is(
    .nl-tariff-card-audience,
    .nl-tariff-beeline-unlimited,
    .nl-tariff-unlimited-copy,
    .nl-tariff-info,
    .tariff-submeta,
    .tariff-price-unit,
    .tariff-metric-unit,
    .tariff-metric-empty
  ){
    color: var(--b2-ink-3);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .tariff-badge{
    border-color: var(--b2-line);
    background: var(--b2-surface-2);
    color: var(--b2-ink-3);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .nl-tariff-connect{
    background: var(--b2-accent);
    color: var(--b2-on-accent);
  }
  body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]) .nl-tariff-tune{
    border: 1px solid var(--b2-line);
    background: var(--b2-surface-2);
    color: var(--b2-ink-2);
  }
}

/* ---------- Выбранный тариф в форме заявки ----------
   Наведение уже красит карточку в инверсию (правила выше), поэтому у
   выбранного тарифа своего цвета не оставалось: в обычной форме активации
   выбранная карточка выглядела ровно так же, как та, на которую просто
   навели курсор. Красим выбранную акцентом точки — он отличает её и от
   остальных карточек, и от карточки под курсором.
   Пятый класс в селекторе (.nl-form-tariff-card) даёт больший вес, чем
   правила :hover / :focus-visible выше, поэтому выбранная карточка остаётся
   акцентной и под курсором, и с клавиатурным фокусом. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected{
  border: 0;
  background: var(--b2-accent);
  color: var(--b2-on-accent);
  box-shadow: 0 0 0 3px rgba(var(--b2-accent-rgb), .45), var(--b2-shadow);
}

/* Шапка лежит прямо на акценте. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-card-headline,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-name,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-title{
  color: var(--b2-on-accent);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-card-audience{
  color: var(--b2-on-accent);
  opacity: .72;
}

/* Галочка у названия: цвет считывается сразу, но состояние «выбрано» должно
   быть понятно и без него — например при высокой контрастности. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-card-headline::after{
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--b2-on-accent);
  color: var(--b2-accent);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

/* Тело карточки возвращаем на обычную поверхность: мелкий текст и цветные
   иконки безлимитов на акценте читались бы заметно хуже. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-card-body{
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-summary,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-metric,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-metric-value,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-price,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-price-value{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-beeline-unlimited,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-unlimited-copy,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-info,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-submeta,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-metric-unit,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-metric-empty,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-price-unit{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-meta{
  background: transparent;
  box-shadow: none;
}

/* Чип тарификации и метка «ХИТ» лежат на акценте — им нужен свой фон,
   иначе акцент на акценте сливается. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .tariff-badge,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-hit-badge{
  border-color: transparent;
  background: var(--b2-on-accent);
  color: var(--b2-accent);
}

/* Кнопка и шестерёнка тоже уходят с акцента. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-connect{
  background: var(--b2-ink);
  color: var(--b2-surface);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.nl-form-tariff-card.selected .nl-tariff-tune{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}

/* Чипы и бейджи вне стартовой карточки. */
body[data-brand="beeline2"] .tariff-chip,
body[data-brand="beeline2"] .tariff-badge,
body[data-brand="beeline2"] .tariff-subchip{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .tariff-card.selected .tariff-chip,
body[data-brand="beeline2"] .tariff-card.selected .tariff-badge,
body[data-brand="beeline2"] .tariff-card.selected .tariff-subchip{
  border-color: rgba(var(--b2-accent-rgb), .45);
  background: rgba(var(--b2-accent-rgb), .14);
  color: var(--b2-ink);
}

/* ---------- Заголовки шагов ---------- */
body[data-brand="beeline2"] .nl-step-heading h3,
body[data-brand="beeline2"] .nl-flow-step-heading h3{
  color: var(--b2-ink);
  font-weight: 800;
  letter-spacing: -.03em;
}
body[data-brand="beeline2"] .nl-step-heading p,
body[data-brand="beeline2"] .nl-flow-step-heading p{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .nl-step-number{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--b2-accent-rgb), .18);
  color: var(--b2-ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Разделитель под шапкой шага. Без отступов текст и кнопка упирались в линию. */
body[data-brand="beeline2"] .nl-flow-step-heading{
  align-items: center;
  margin: 26px 0 22px;
  padding: 0 2px 18px;
  border-bottom: 1px solid var(--b2-line);
}
body[data-brand="beeline2"] .nl-flow-step-heading > div{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
body[data-brand="beeline2"] .nl-flow-step-heading h3{
  margin: 0;
}
body[data-brand="beeline2"] .nl-flow-step-heading p{
  margin: 0;
}
body[data-brand="beeline2"] .nl-direct-back-btn{
  margin: 0 0 4px;
}

/* ---------- Выбранный тариф в форме ---------- */
body[data-brand="beeline2"] .nl-selected-tariff-summary,
body[data-brand="beeline2"] .nl-form-tariff-picker,
body[data-brand="beeline2"] .nl-selected-tariff-metric{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius-sm);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-selected-tariff-summary-details,
body[data-brand="beeline2"] .nl-selected-tariff-payment{
  color: var(--b2-ink-3);
}

/* ---------- Проверка статуса ---------- */
body[data-brand="beeline2"] .public-status-checker{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  box-shadow: none;
}
body[data-brand="beeline2"] .public-status-title{
  color: var(--b2-ink);
  font-weight: 700;
}
body[data-brand="beeline2"] .public-status-result{
  background: var(--b2-surface);
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius-sm);
  color: var(--b2-ink-2);
}

/* ---------- Поддержка ---------- */
body[data-brand="beeline2"] .support-block{
  background: transparent;
  border: 0;
}
body[data-brand="beeline2"] .support-btn{
  border: 1px solid var(--b2-line-strong);
  border-radius: 999px;
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .support-btn:hover{
  background: var(--b2-surface-2);
  border-color: var(--b2-accent);
}
body[data-brand="beeline2"] .nl-faq-support-icon{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface);
  color: var(--b2-ink-2);
  box-shadow: var(--b2-shadow-sm);
  transition: transform .16s ease, color .16s ease, border-color .16s ease;
}
body[data-brand="beeline2"] .nl-faq-support-icon:hover,
body[data-brand="beeline2"] .nl-faq-support-icon:active{
  color: var(--b2-ink);
  border-color: var(--b2-accent);
  background: var(--b2-surface);
  transform: translateY(-2px);
}
body[data-brand="beeline2"] .nl-faq-support-icon svg{
  color: currentColor;
}

/* ---------- FAQ ---------- */
body[data-brand="beeline2"] .nl-faq{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius-lg);
  background: var(--b2-surface);
  box-shadow: var(--b2-shadow-sm);
}
body[data-brand="beeline2"] .nl-faq h2{
  color: var(--b2-ink);
  font-weight: 800;
  letter-spacing: -.03em;
}
body[data-brand="beeline2"] .nl-faq-group-title{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-faq-group-title span{
  color: var(--b2-on-accent);
  background: var(--b2-accent);
  border-radius: 8px;
  padding: 2px 8px;
}
body[data-brand="beeline2"] .nl-faq-item{
  border-bottom: 1px solid var(--b2-line);
}
body[data-brand="beeline2"] .nl-faq-question{
  color: var(--b2-ink);
  background: transparent;
  font-weight: 600;
  transition: color .16s ease;
}
body[data-brand="beeline2"] .nl-faq-question:hover{
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-faq-question::after{
  color: var(--b2-ink-3);
  background: var(--b2-surface-2);
  border: 1px solid var(--b2-line);
}
/* Кружок «+» у вопроса: партнёрская раскладка красит его на наведении в
   чёрный с белым знаком. В тёмной теме это чёрная дыра, а на телефоне
   залипший после касания :hover оставлял её на экране. Держим кружок в
   токенах темы; :not([aria-expanded="true"]) — чтобы не перебить акцентный
   кружок у раскрытого вопроса (правило ниже той же специфичности). */
body[data-brand="beeline2"] .nl-faq-question:hover:not([aria-expanded="true"])::after{
  border-color: var(--b2-line-strong);
  background: var(--b2-surface-3);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-faq-question[aria-expanded="true"]::after{
  background: var(--b2-accent);
  border-color: var(--b2-accent);
  color: var(--b2-on-accent);
}
body[data-brand="beeline2"] .nl-faq-answer,
body[data-brand="beeline2"] .nl-faq-steps{
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-faq-steps li::marker{
  color: var(--b2-accent);
}
body[data-brand="beeline2"] .nl-faq-anchor-btn{
  border: 1px solid var(--b2-line-strong);
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-faq-anchor-btn::before{
  background: var(--b2-accent);
}

/* ---------- Подвал ----------
   Партнёрская раскладка ставит контакты и правовые ссылки в одну строку
   через space-between: при длинных ссылках блоки разъезжались и прыгали по
   вертикали. Здесь — две колонки с общей базовой линией и переносом. */
body[data-brand="beeline2"] .nl-public-footer{
  width: min(1120px, calc(100% - 40px));
  margin: 40px auto 32px;
  padding: 22px 0 0;
  border-top: 1px solid var(--b2-line);
  background: transparent;
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-public-footer-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
body[data-brand="beeline2"] .nl-footer-contacts{
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
body[data-brand="beeline2"] .nl-footer-label{
  margin-right: 4px;
  color: var(--b2-ink-3);
  font-size: 13px;
  font-weight: 600;
}
body[data-brand="beeline2"] .nl-footer-phone{
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--b2-line);
  border-radius: 999px;
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  font-size: 14px;
  font-weight: 700;
}
body[data-brand="beeline2"] .nl-footer-phone:hover{
  border-color: var(--b2-accent);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-footer-phone svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}
body[data-brand="beeline2"] .nl-footer-social{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--b2-line);
  border-radius: 50%;
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-footer-social svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
body[data-brand="beeline2"] .nl-footer-social:hover{
  border-color: var(--b2-accent);
  color: var(--b2-ink);
}

/* Правовые ссылки: колонка справа, ровный столбик вместо рваной строки. */
body[data-brand="beeline2"] .nl-footer-policies{
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  text-align: right;
}
body[data-brand="beeline2"] .nl-footer-policies a{
  color: var(--b2-ink-3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
body[data-brand="beeline2"] .nl-footer-policies a:hover{
  color: var(--b2-ink);
}

/* Средняя колонка: предупреждение про cookie и Яндекс Метрику. */
body[data-brand="beeline2"] .nl-footer-cookie-notice{
  flex: 1 1 300px;
  max-width: 440px;
  color: var(--b2-ink-3);
  font-size: 12px;
  line-height: 1.45;
}
body[data-brand="beeline2"] .nl-footer-cookie-notice a{
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-footer-cookie-notice a:hover{
  color: var(--b2-ink);
}

@media (max-width: 720px){
  body[data-brand="beeline2"] .nl-public-footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  body[data-brand="beeline2"] .nl-footer-policies{
    align-items: flex-start;
    text-align: left;
  }
  body[data-brand="beeline2"] .nl-footer-cookie-notice{
    flex: 0 0 auto;
    max-width: 100%;
    text-align: left;
  }
}

/* ---------- Согласия, тексты, служебные блоки ---------- */
body[data-brand="beeline2"] .consent-text,
body[data-brand="beeline2"] .mnp-consent-box,
body[data-brand="beeline2"] .consent-confirmation-row{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius-sm);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .delivery-form-progress{
  background: var(--b2-surface-2);
  border-color: var(--b2-line);
  color: var(--b2-ink-2);
}

/* ---------- Модальные окна (детали тарифа, выбор SIM) ---------- */
/* Панель лежит вне .container и в тёмной теме оставалась светлой. */
body[data-brand="beeline2"] .nl-tariff-details-panel{
  background: var(--b2-surface);
  color: var(--b2-ink);
  box-shadow: var(--b2-shadow-lg);
}
body[data-brand="beeline2"] .nl-tariff-details-close{
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  border: 1px solid var(--b2-line);
}
body[data-brand="beeline2"] .nl-tariff-details-panel h2,
body[data-brand="beeline2"] .nl-tariff-details-panel h3,
body[data-brand="beeline2"] .nl-tariff-details-panel .nl-tariff-details-title{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-tariff-details-content,
body[data-brand="beeline2"] .nl-tariff-details-panel p{
  color: var(--b2-ink-2);
}
/* Второй вариант в окне «SIM-карта уже есть?» не должен быть жёлтым. */
body[data-brand="beeline2"] .nl-sim-availability-actions .beeline-btn.secondary,
body[data-brand="beeline2"] .nl-sim-availability-actions .btn-secondary{
  background: var(--b2-surface-2);
  border: 1px solid var(--b2-line-strong);
  color: var(--b2-ink);
  box-shadow: none;
}

/* ---------- Уведомление о cookie ---------- */
/* Баннер лежит вне .container и в тёмной теме оставался белым. */
body[data-brand="beeline2"] .cookie-notice{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface);
  color: var(--b2-ink-2);
  box-shadow: var(--b2-shadow);
}
body[data-brand="beeline2"] .cookie-notice-text{
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .cookie-notice-text a{
  color: var(--b2-ink);
}
/* Второстепенный выбор не должен выглядеть как основное действие. */
body[data-brand="beeline2"] .cookie-notice .beeline-btn.secondary{
  background: var(--b2-surface-2);
  border: 1px solid var(--b2-line-strong);
  color: var(--b2-ink);
  box-shadow: none;
}
body[data-brand="beeline2"] .cookie-notice .beeline-btn.secondary:hover{
  background: var(--b2-surface-3);
  filter: none;
}

/* ---------- Прелоадер ----------
   Базовый #page-preloader прибит к белому через !important, поэтому в тёмной
   теме перекрываем его тем же весом. Спиннер показываем без подложки: рамка
   вокруг него выглядела как лишний квадрат. */
body[data-brand="beeline2"] #page-preloader{
  background-color: var(--b2-bg) !important;
}
body[data-brand="beeline2"] #page-preloader .pp-card,
body[data-brand="beeline2"] #page-preloader .pp-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body[data-brand="beeline2"] #page-preloader .pp-spinner{
  border-color: rgba(var(--b2-accent-rgb), .22);
  border-top-color: var(--b2-accent);
}
body[data-brand="beeline2"] #page-preloader .pp-text{
  color: var(--b2-ink-2);
}

/* ---------- Тёмная тема: точечные правки ---------- */
/* Слой партнёрской раскладки местами задаёт белый фон и чёрный текст
   константами — перекрываем их там, где это видно на экране.
   Контейнеры при этом остаются прозрачными: страница плоская, без карточки. */
body[data-brand="beeline2"][data-theme="dark"] .container,
body[data-brand="beeline2"][data-theme="dark"] .flow-start-box,
body[data-brand="beeline2"][data-theme="dark"] .consent-box,
body[data-brand="beeline2"][data-theme="dark"] #form-container,
body[data-brand="beeline2"][data-theme="dark"] #consent-container,
body[data-brand="beeline2"][data-theme="dark"] #flow-start-container{
  background: transparent;
  color: var(--b2-ink);
}
body[data-brand="beeline2"][data-theme="dark"] .delivery-method-card,
body[data-brand="beeline2"][data-theme="dark"] .delivery-number-option{
  background: var(--b2-surface-2);
  border-color: var(--b2-line);
  color: var(--b2-ink);
}
body[data-brand="beeline2"][data-theme="dark"] .delivery-method-price{
  color: var(--b2-ink-3);
}
/* Подсказка «Пример» лежит на светлой плашке из style.css
   (rgba(255,255,255,.32)) — в тёмной теме выходил светлый текст на светлом
   пятне. Плашку делаем тёмной, текст — обычным вторичным. */
body[data-brand="beeline2"][data-theme="dark"] .preview-hint{
  color: var(--b2-ink-2);
  background: rgba(12, 15, 22, .55);
}
/* Значки и иллюстрации, нарисованные тёмным по светлому. */
body[data-brand="beeline2"][data-theme="dark"] .file-preview img{
  background: var(--b2-surface-3);
}

/* =========================================================
   Страница статуса заявки (success.html)
   ========================================================= */
body.success-page[data-brand="beeline2"]{
  background: var(--b2-bg);
  color: var(--b2-ink);
}

/* Обёртка всей страницы статуса красится в --beeline-gray (у темы это
   --b2-bg) и закрывала собой фоновые соты: слои узора лежат на z-index -2/-1,
   то есть под любым непрозрачным содержимым. Фон нужного цвета и так рисует
   body, поэтому обёртку делаем прозрачной — только тогда узор виден, как на
   главной, где такой обёртки просто нет. */
body.success-page[data-brand="beeline2"] .page{
  background: transparent;
}

body.success-page[data-brand="beeline2"] .container,
body.success-page[data-brand="beeline2"] .success-shell{
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .success-shell::before{
  content: none;
}

/* Шапка страницы статуса: логотипы слева, переключатель темы справа.
   Партнёрский слой ставит здесь колонку по центру — разворачиваем в строку. */
body.success-page[data-brand="beeline2"] .success-brand-header{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
body.success-page[data-brand="beeline2"] .success-brand-lockup{
  order: 1;
}
body.success-page[data-brand="beeline2"] .brand-header-actions{
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
body.success-page[data-brand="beeline2"] .success-brand-titles{
  order: 3;
  flex: 0 0 100%;
  width: 100%;
  padding-top: 14px;
}

body.success-page[data-brand="beeline2"] .success-brand-primary-logo{
  height: 34px;
}
body.success-page[data-brand="beeline2"] .success-partner-logo{
  width: auto;
  max-width: 128px;
  height: 30px;
  object-fit: contain;
}
body.success-page[data-brand="beeline2"] .success-brand-separator{
  width: 1px;
  height: 26px;
  overflow: hidden;
  text-indent: -999px;
  color: transparent;
  background: var(--b2-line-strong);
  border-radius: 1px;
}
body.success-page[data-brand="beeline2"][data-theme="dark"] .success-partner-logo,
body.success-page[data-brand="beeline2"][data-theme="dark"] .success-brand-primary-logo{
  padding: 0;
  border-radius: 0;
  background: none;
}

/* Раскладка задаёт этим элементам display, из-за чего атрибут hidden перестаёт
   работать. Без логотипа партнёра разделитель не должен висеть в шапке. */
body[data-brand="beeline2"] .success-brand-separator[hidden],
body[data-brand="beeline2"] .success-partner-logo[hidden],
body[data-brand="beeline2"] .success-brand-kicker[hidden],
body[data-brand="beeline2"] .brand-collab-separator[hidden],
body[data-brand="beeline2"] .brand-partner-logo[hidden]{
  display: none !important;
}

body.success-page[data-brand="beeline2"] .success-brand-kicker{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--b2-ink-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  animation: none;
}
body.success-page[data-brand="beeline2"] .page-title{
  color: var(--b2-ink);
  font-weight: 800;
  letter-spacing: -.03em;
}

body.success-page[data-brand="beeline2"] .request-pill,
body.success-page[data-brand="beeline2"] .status-check-card,
body.success-page[data-brand="beeline2"] .gosuslugi-confirm-card,
body.success-page[data-brand="beeline2"] .office-pickup-card,
body.success-page[data-brand="beeline2"] .notice,
body.success-page[data-brand="beeline2"] .success-list,
body.success-page[data-brand="beeline2"] #success-partner-box,
body.success-page[data-brand="beeline2"] .success-email-notice,
body.success-page[data-brand="beeline2"] .max-notification-card{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
}
body.success-page[data-brand="beeline2"] .request-pill-label,
body.success-page[data-brand="beeline2"] .request-pill-hint,
body.success-page[data-brand="beeline2"] .office-pickup-kicker{
  color: var(--b2-ink-3);
}
body.success-page[data-brand="beeline2"] .request-pill-number{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .status-check-btn,
body.success-page[data-brand="beeline2"] .gosuslugi-confirm-btn,
body.success-page[data-brand="beeline2"] .office-pickup-map-btn{
  border: 0;
  border-radius: 999px;
  background: var(--b2-accent);
  color: var(--b2-on-accent);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--b2-accent-rgb), .30);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body.success-page[data-brand="beeline2"] .status-check-btn:hover,
body.success-page[data-brand="beeline2"] .gosuslugi-confirm-btn:hover,
body.success-page[data-brand="beeline2"] .office-pickup-map-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 26px rgba(var(--b2-accent-rgb), .38);
}

/* ---------- Визит в офис: шаги на странице статуса ----------
   Инлайновый <style> success.html и партнёрский слой описывают эти блоки
   светлыми константами (#ffffff, #fff4c9, #f5f8df, чёрные кружки шагов) —
   в тёмной теме выходили белые плашки со светлым текстом, а кнопка на
   выделенном шаге после касания залипала чёрной (:hover на телефоне держится
   до касания в другом месте). Повторяем те же селекторы в токенах темы. */
body.success-page[data-brand="beeline2"] .office-pickup-action{
  border-color: var(--b2-line);
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"].has-office-pickup .status-check-card{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
}
body.success-page[data-brand="beeline2"] .office-pickup-action.is-office-select{
  border-color: rgba(var(--b2-accent-rgb), .38);
  background: rgba(var(--b2-accent-rgb), .12);
}
body.success-page[data-brand="beeline2"] .office-pickup-action.is-restore{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
}
/* Кнопка «Показать на карте» на выделенном шаге: раскладка делает её белой,
   а на наведении — чёрной. Держим акцентной, как остальные кнопки страницы. */
body.success-page[data-brand="beeline2"] .office-pickup-action.is-office-select .office-pickup-map-btn,
body.success-page[data-brand="beeline2"] .office-pickup-action.is-office-select .office-pickup-map-btn:hover{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}
/* Кружки с номером шага — чёрные с белой цифрой: на тёмном фоне вместо кружка
   получалась дыра. Инвертируем их вместе с темой. */
body.success-page[data-brand="beeline2"] .office-pickup-action-index,
body.success-page[data-brand="beeline2"] .status-check-step-number{
  background: var(--b2-ink);
  color: var(--b2-bg);
}
/* ---------- Результат проверки статуса ----------
   Карточку и бейджи описывает инлайновый <style> в success.html — светлыми
   константами и своими переменными --status-*. Значения переменных проще
   переопределить, чем повторять каждое правило: тогда тёмную тему получают и
   те состояния бейджа, которых здесь нет.
   Тон каждого статуса сохраняем (зелёный — успех, красный — отказ), но пастель
   меняем на полупрозрачную заливку по тёмному фону, а текст — на светлый:
   исходные #e8fff2 и подобные светятся на тёмном белыми пятнами. */
body.success-page[data-brand="beeline2"][data-theme="dark"]{
  --success-card: var(--b2-surface);
  --success-border: var(--b2-line);
  --success-text: var(--b2-ink);
  --success-muted: var(--b2-ink-3);

  --status-success: #5ee0a0;
  --status-success-bg: rgba(31, 157, 85, .18);
  --status-processing: #8ab4ff;
  --status-processing-bg: rgba(37, 99, 235, .20);
  --status-danger: #ff8f8f;
  --status-danger-bg: rgba(220, 38, 38, .18);
  --status-warning: #f0b46a;
  --status-warning-bg: rgba(180, 83, 9, .22);
  --status-neutral: #b7c0d0;
  --status-neutral-bg: rgba(255, 255, 255, .07);
  --status-mnp: #c4a2ff;
  --status-mnp-bg: rgba(124, 58, 237, .22);
}
body.success-page[data-brand="beeline2"] .status-result{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .status-result-title{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .status-updated{
  color: var(--b2-ink-3);
}
body.success-page[data-brand="beeline2"] .status-note{
  color: var(--b2-ink-2);
}
/* Блик сверху нарисован белым по светлой пастели — на тёмном он лишний. */
body.success-page[data-brand="beeline2"][data-theme="dark"] .status-badge{
  box-shadow: none;
}

/* ---------- «Ваши заявки»: партия заявок визита в офис ----------
   Блок описан инлайновым <style> в success.html светлыми константами: #fff
   в градиенте карточки, белый фон строки, серая плашка статуса и розовый
   блок ошибок. В тёмной теме он оставался светлым пятном, поэтому
   перекрываем токенами. Заливка ровная, без градиента — как у соседних
   карточек страницы статуса. */
body.success-page[data-brand="beeline2"] .office-batch-card{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
}
body.success-page[data-brand="beeline2"] .office-batch-card h2{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .office-batch-summary{
  color: var(--b2-ink-2);
}
body.success-page[data-brand="beeline2"] .office-batch-item{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius-sm);
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .office-batch-item strong{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .office-batch-item-copy span{
  color: var(--b2-ink-3);
}
/* Плашка статуса нейтральная: акцент уже занят самой карточкой. */
body.success-page[data-brand="beeline2"] .office-batch-item-status{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-3);
  color: var(--b2-ink-2);
}
body.success-page[data-brand="beeline2"] .office-batch-contract{
  color: var(--b2-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.success-page[data-brand="beeline2"] .office-batch-contract:hover{
  color: var(--b2-accent);
}
/* Ошибки берут те же переменные, что и бейдж «Отказ»: в тёмной теме они уже
   переопределены выше, поэтому блок не светится розовым. */
body.success-page[data-brand="beeline2"] .office-batch-failures{
  border: 1px solid rgba(220, 38, 38, .32);
  border-radius: var(--b2-radius-sm);
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

/* Блок помощи: заголовок и телефон приходили константами и терялись в тёмной теме. */
body.success-page[data-brand="beeline2"] .support-block,
body.success-page[data-brand="beeline2"] .form-warning.support-block{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}
body.success-page[data-brand="beeline2"] .support-title{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .support-phone{
  color: var(--b2-ink);
  font-weight: 700;
}
body.success-page[data-brand="beeline2"] .support-btn{
  border: 1px solid var(--b2-line-strong);
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .support-btn:hover{
  border-color: var(--b2-accent);
}
/* Ссылки на политики заданы синим по id — перекрываем теми же id. */
body[data-brand="beeline2"] .privacy-policy-link,
body[data-brand="beeline2"] #public-privacy-policy-link,
body[data-brand="beeline2"] #public-personal-data-consent-link,
body[data-brand="beeline2"] #public-cookie-policy-link,
body[data-brand="beeline2"] #success-privacy-policy-link{
  color: var(--b2-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-brand="beeline2"] .privacy-policy-link:hover,
body[data-brand="beeline2"] #public-privacy-policy-link:hover,
body[data-brand="beeline2"] #public-personal-data-consent-link:hover,
body[data-brand="beeline2"] #public-cookie-policy-link:hover,
body[data-brand="beeline2"] #success-privacy-policy-link:hover{
  color: var(--b2-ink);
}

/* Ссылки на политики шли синим цветом браузера. */
body.success-page[data-brand="beeline2"] a:not(.support-btn):not(.status-check-btn):not(.gosuslugi-confirm-btn):not(.office-pickup-map-btn){
  color: var(--b2-ink-2);
}
body.success-page[data-brand="beeline2"] a:not(.support-btn):not(.status-check-btn):not(.gosuslugi-confirm-btn):not(.office-pickup-map-btn):hover{
  color: var(--b2-ink);
}

/* Кружок с конвертом партнёрская раскладка красит салатовым (#e4f18b) —
   это цвет NL, и в тёмной теме он светится инородным пятном. Берём акцент
   точки с малой прозрачностью: узнаваемо и спокойно в обеих темах.
   Специфичность совпадает с партнёрским правилом из инлайнового <style>
   в success.html, а b2-theme.css подключается после него — поэтому выигрывает
   порядок, и укорачивать селектор нельзя. */
body.success-page[data-brand="beeline2"] .success-email-notice-icon{
  background: rgba(var(--b2-accent-rgb), .18);
  color: var(--b2-ink);
  box-shadow: none;
}
body.success-page[data-brand="beeline2"][data-theme="dark"] .success-email-notice-icon{
  background: rgba(var(--b2-accent-rgb), .24);
}
/* ---------- Карточка MAX ----------
   Единственное действие, которое клиент может сделать прямо на этой странице,
   поэтому обводим её акцентом точки — жёлтой рамкой с мягким ореолом.
   Селекторы повторяют форму партнёрских правил из инлайнового <style>
   success.html (…card:not(.is-bound) и …card.is-bound): при равной
   специфичности решает порядок подключения, а более короткий селектор
   просто не сработал бы.
   Сине-фиолетовая кнопка MAX остаётся фирменной — её мы не перекрашиваем. */
body.success-page[data-brand="beeline2"] .max-notification-card:not(.is-bound),
body.success-page[data-brand="beeline2"] .max-notification-card.is-bound{
  border: 1px solid rgba(var(--b2-accent-rgb), .55);
  background: var(--b2-surface-2);
  box-shadow: 0 0 0 3px rgba(var(--b2-accent-rgb), .16);
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"][data-theme="dark"] .max-notification-card:not(.is-bound),
body.success-page[data-brand="beeline2"][data-theme="dark"] .max-notification-card.is-bound{
  box-shadow: 0 0 0 3px rgba(var(--b2-accent-rgb), .22);
}
/* Подпись «Рекомендуем» нарисована тёмно-синим (#4761c7) — на тёмном фоне
   она почти сливается, поэтому берём светлый оттенок того же тона. */
body.success-page[data-brand="beeline2"][data-theme="dark"] .max-notification-eyebrow{
  color: #9fb0ff;
}
/* style.css красит любой <strong> в #111 — в тёмной теме это чёрный текст на
   тёмном фоне. Наследуем цвет родителя: у блоков темы он уже задан правильно.
   Правила с собственным цветом (цена тарифа, подпись в кнопке) специфичнее,
   поэтому их это не трогает. */
body[data-brand="beeline2"] strong{
  color: inherit;
}
/* Срок активации в уведомлении о письме — то, ради чего клиент возвращается на
   страницу, поэтому в тёмной теме печатаем его акцентом точки: жёлтый по
   поверхности даёт контраст около 10:1. В светлой теме тот же жёлтый по белому
   не читался бы, там выделение держится начертанием. */
body.success-page[data-brand="beeline2"] .success-email-notice strong{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"][data-theme="dark"] .success-email-notice strong{
  color: var(--b2-accent);
}

body.success-page[data-brand="beeline2"] .max-notification-title{
  color: var(--b2-ink);
}
body.success-page[data-brand="beeline2"] .max-notification-text{
  color: var(--b2-ink-2);
}
body.success-page[data-brand="beeline2"][data-theme="dark"] .max-notification-logo-wrap{
  background: rgba(255, 255, 255, .92);
  border-radius: 10px;
}
body.success-page[data-brand="beeline2"][data-theme="dark"] .max-notification-logo-wrap{
  border-color: rgba(255, 255, 255, .18);
}

/* ---------- Уважение к системным настройкам ---------- */
@media (prefers-reduced-motion: reduce){
  body[data-brand="beeline2"] *,
  body[data-brand="beeline2"] *::before,
  body[data-brand="beeline2"] *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 640px){
  body[data-brand="beeline2"] .container{
    width: calc(100% - 16px);
    border-radius: 24px;
  }
  body[data-brand="beeline2"] .nl-collab-kicker{
    font-size: clamp(22px, 7vw, 30px);
  }
  /* На мобильных высота логотипа равна кнопке переключения темы.
     !important обязателен: партнёрское правило в style.css
     (@media max-width:520px) задаёт height:36px !important, и без этого
     ни порядок подключения, ни специфичность его не перебьют. */
  body[data-brand="beeline2"] .brand-logo{
    height: var(--b2-theme-toggle-size, 40px) !important;
    width: auto;
  }
  body[data-brand="beeline2"] .brand-partner-logo{ height: 26px; max-width: 104px; }
  .theme-toggle{
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
}


/* =========================================================
   Билайн 2.0: правки по замечаниям
   ========================================================= */

/* ---------- Кнопки под тарифами в одну строку ----------
   FAQ слева, «Другие действия» справа — на всех ширинах, включая телефон. */
body[data-brand="beeline2"] #nl-tariff-first-step{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  row-gap: 18px;
  column-gap: 10px;
}
body[data-brand="beeline2"] #nl-tariff-first-step > .nl-step-heading,
body[data-brand="beeline2"] #nl-tariff-first-step > #nl-start-tariff-cards{
  grid-column: 1 / -1;
}
body[data-brand="beeline2"] #nl-tariff-first-step > #nl-faq-anchor-btn{
  grid-column: 1;
  justify-self: start;
  margin: 0;
}
body[data-brand="beeline2"] #nl-tariff-first-step > #nl-other-actions-btn{
  grid-column: 2;
  justify-self: end;
  margin: 0;
}

/* На узких экранах место делится в обрез: уменьшаем FAQ и разрешаем
   длинной надписи переноситься, чтобы обе кнопки остались в одной строке. */
@media (max-width: 720px){
  body[data-brand="beeline2"] #nl-tariff-first-step > #nl-faq-anchor-btn{
    min-height: 46px;
    padding: 8px 14px 8px 8px;
    gap: 8px;
    font-size: 19px;
  }
  body[data-brand="beeline2"] #nl-tariff-first-step > #nl-faq-anchor-btn::before{
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 16px;
  }
  body[data-brand="beeline2"] #nl-tariff-first-step > #nl-other-actions-btn{
    min-width: 0;
    min-height: 46px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Ширина FAQ по основной колонке ----------
   Блок вынесен из .container скриптом, поэтому ширину задаём отдельно —
   ровно как у «Проверить статус активации». Значения повторяют ширину
   .container минус его горизонтальные поля; у beeline2 своя ширина
   контейнера (b2-theme.css, около строк 98 и 2347), поэтому переменную
   из style.css переопределяем целиком. Объявления идут подряд от широкого
   к узкому: специфичность одинаковая, решает порядок в файле. */
body[data-brand="beeline2"]{
  /* .container: min(1120px, 100% - 40px), padding 22px */
  --nl-faq-column: calc(min(1120px, calc(100% - 40px)) - 44px);
}
@media (max-width: 680px){
  body[data-brand="beeline2"]{
    /* .container: min(1120px, 100% - 40px), padding 16px */
    --nl-faq-column: calc(min(1120px, calc(100% - 40px)) - 32px);
  }
}
@media (max-width: 640px){
  body[data-brand="beeline2"]{
    /* .container: 100% - 16px, padding 16px */
    --nl-faq-column: calc(100% - 48px);
  }
}
body[data-brand="beeline2"] .nl-faq{
  width: var(--nl-faq-column);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Подсказка про тип расчёта ----------
   Была чёрной плашкой и сливалась с инвертированной карточкой. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-badge::after{
  border: 1px solid var(--b2-line-strong);
  border-radius: 12px;
  background: var(--b2-surface);
  color: var(--b2-ink);
  box-shadow: var(--b2-shadow);
  font-weight: 500;
}

/* =========================================================
   Тёмная тема на шагах оформления заявки
   Базовые стили формы написаны под светлый фон константами,
   поэтому здесь перечислены все её поверхности и подписи.
   ========================================================= */

/* ---------- Карточки полей и поля ввода ---------- */
body[data-brand="beeline2"] .form-group{
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  box-shadow: none;
}
body[data-brand="beeline2"] .beeline-input,
body[data-brand="beeline2"] .beeline-select,
body[data-brand="beeline2"] textarea{
  border: 1px solid var(--b2-line);
  border-radius: 14px;
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .beeline-input::placeholder,
body[data-brand="beeline2"] textarea::placeholder{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .beeline-input:hover{
  border-color: var(--b2-line-strong);
}
body[data-brand="beeline2"] input:focus,
body[data-brand="beeline2"] textarea:focus,
body[data-brand="beeline2"] select:focus{
  border-color: var(--b2-accent);
  box-shadow: 0 0 0 3px rgba(var(--b2-accent-rgb), .35);
}
body[data-brand="beeline2"] .inline-prefix,
body[data-brand="beeline2"] #sim-serial-prefix{
  color: var(--b2-ink-2);
}

/* ---------- Подписи и заголовки шагов ---------- */
body[data-brand="beeline2"] label,
body[data-brand="beeline2"] #step-data .section-title,
body[data-brand="beeline2"] #step-docs .section-title,
body[data-brand="beeline2"] .section-title,
body[data-brand="beeline2"] .mini-label,
body[data-brand="beeline2"] .step-title{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .hint,
body[data-brand="beeline2"] .hint2,
body[data-brand="beeline2"] .step-subtitle,
body[data-brand="beeline2"] #step-data .mini-label .hint,
body[data-brand="beeline2"] .preview-hint,
body[data-brand="beeline2"] .form-note{
  color: var(--b2-ink-3);
}

/* ---------- Блок помощи в форме ---------- */
body[data-brand="beeline2"] .form-warning.support-block,
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block){
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-radius);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
  box-shadow: none;
}
body[data-brand="beeline2"] .support-title{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .support-subtitle{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .support-heading-icon{
  background: rgba(var(--b2-accent-rgb), .18);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .support-phone{
  border: 1px solid var(--b2-line);
  border-radius: 14px;
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .support-phone svg{
  fill: currentColor;
}

/* ---------- Согласие ---------- */
body[data-brand="beeline2"] #consent-main-text,
body[data-brand="beeline2"] .consent-text p{
  color: var(--b2-ink-2);
}
/* Без рамки и подложки: строка согласия — это просто чекбокс с текстом. */
body[data-brand="beeline2"] .consent-confirmation-row{
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .consent-confirmation-row span{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .consent-confirmation-row input[type="checkbox"],
body[data-brand="beeline2"] .mnp-consent-box input[type="checkbox"]{
  border-color: var(--b2-line-strong);
  background: var(--b2-surface-2);
}
body[data-brand="beeline2"] .consent-confirmation-row input[type="checkbox"]:checked,
body[data-brand="beeline2"] .mnp-consent-box input[type="checkbox"]:checked{
  border-color: var(--b2-accent);
  background: var(--b2-accent);
}
body[data-brand="beeline2"] .consent-confirmation-row input[type="checkbox"]:checked::before,
body[data-brand="beeline2"] .mnp-consent-box input[type="checkbox"]:checked::before{
  border-color: var(--b2-on-accent);
}

/* ---------- Выбранный тариф в форме ---------- */
body[data-brand="beeline2"] .nl-selected-tariff-summary,
body[data-brand="beeline2"] .nl-selected-tariff-summary-head,
body[data-brand="beeline2"] .nl-selected-tariff-summary-details,
body[data-brand="beeline2"] .nl-selected-tariff-metrics,
body[data-brand="beeline2"] .nl-selected-tariff-metric,
body[data-brand="beeline2"] .nl-selected-tariff-payment{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-selected-tariff-label,
body[data-brand="beeline2"] .nl-selected-tariff-summary-details,
body[data-brand="beeline2"] .nl-selected-tariff-payment{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .nl-selected-tariff-metric .tariff-metric-value,
body[data-brand="beeline2"] .nl-selected-tariff-name{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .nl-selected-tariff-metric .tariff-metric-unit{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .nl-selected-tariff-billing{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}

/* ---------- Загрузка файлов ---------- */
body[data-brand="beeline2"] .file-upload-preview,
body[data-brand="beeline2"] .preview-box,
body[data-brand="beeline2"] .signature-box{
  border: 1px dashed var(--b2-line-strong);
  border-radius: var(--b2-radius-sm);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}

/* ---------- Окно подписи ----------
   В тёмной теме окно приходило из style.css белым (rgba(255,255,255,.92)),
   а холст — с background:#fff.

   Цвет штриха менять нельзя: подпись рисуется чернилами #163a8a по прозрачному
   холсту, и именно эти пиксели уходят в договор (cropSignatureToDataURL →
   toDataURL). Поэтому холст инвертируется средствами CSS: на экране светлая
   подпись на тёмном поле, а в PNG по-прежнему тёмные чернила на прозрачном —
   CSS-фильтры в данные canvas не попадают. hue-rotate(180deg) возвращает
   чернилам синеву, иначе инверсия делает их жёлтыми.
   Тем же приёмом показываем сохранённую подпись в превью формы. */
body[data-brand="beeline2"][data-theme="dark"] .modal-content{
  background: var(--b2-surface-2);
  border-color: var(--b2-line);
  color: var(--b2-ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
body[data-brand="beeline2"][data-theme="dark"] .modal-content h2{
  color: var(--b2-ink);
}
body[data-brand="beeline2"][data-theme="dark"] .close{
  background: var(--b2-surface-3);
  border-color: var(--b2-line);
  color: var(--b2-ink);
}
body[data-brand="beeline2"][data-theme="dark"] #signature-pad{
  /* Не чистый #fff: после инверсии получилось бы абсолютно чёрное поле. */
  background: #e8eaef;
  border-color: var(--b2-line);
  filter: invert(1) hue-rotate(180deg);
}
body[data-brand="beeline2"][data-theme="dark"] #signature-preview{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
}
body[data-brand="beeline2"][data-theme="dark"] #signature-image{
  background: #e8eaef;
  border-color: var(--b2-line);
  filter: invert(1) hue-rotate(180deg);
}

/* ---------- Пример документа в поле загрузки ----------
   Картинки примеров (--example-img в .preview.has-example::before) нарисованы
   тёмными линиями по белому листу. В светлой теме этого достаточно, а в тёмной
   пример инвертируется — иначе тёмное на тёмном не читается вовсе.
   Подкраску в акцентный цвет пробовали и убрали: жёлтый скан выглядел
   инородно, монохром спокойнее. */
body[data-brand="beeline2"] .preview{
  border: 1px dashed var(--b2-line-strong);
  border-radius: var(--b2-radius-sm);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"][data-theme="dark"] .preview.has-example::before{
  filter: grayscale(1) invert(1);
  opacity: .3;
}

/* ---------- Предупреждения ---------- */
body[data-brand="beeline2"] .form-warning:not(.support-block),
body[data-brand="beeline2"] .form-warning-2,
body[data-brand="beeline2"] .form-warning-3{
  border: 1px solid rgba(220, 90, 60, .35);
  border-radius: var(--b2-radius-sm);
  background: rgba(220, 90, 60, .10);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .form-warning-2 strong,
body[data-brand="beeline2"] .form-warning-3 strong{
  color: var(--b2-ink);
}

/* Часть правил формы задана с большей специфичностью (:nth-of-type и id),
   поэтому повторяем их форму — иначе блоки остаются белыми в тёмной теме. */
body[data-brand="beeline2"] .form-group:nth-of-type(even),
body[data-brand="beeline2"] .consent-text{
  background: var(--b2-surface-2);
  border-color: var(--b2-line);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-phone{
  border-color: var(--b2-line);
  background: var(--b2-surface);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-phone-copy small{
  color: var(--b2-ink-3);
}

/* Блок «Помощь» на шаге формы почти целиком описан правилами с id. */
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block){
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-title,
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-phone-copy strong{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-subtitle,
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-phone-copy small{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-phone > svg{
  fill: var(--b2-ink-2);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-phone:hover{
  border-color: var(--b2-accent);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-heading-icon{
  background: rgba(var(--b2-accent-rgb), .20);
}
body[data-brand="beeline2"] :is(#public-support-block, #success-support-block) .support-heading-icon svg{
  fill: var(--b2-ink);
}

/* Цена в блоке выбранного тарифа задана без класса (.nl-selected-tariff-payment strong),
   поэтому правило по классам её не доставало — оставалась тёмной на тёмном. */
body[data-brand="beeline2"] .nl-selected-tariff-payment strong,
body[data-brand="beeline2"] .nl-selected-tariff-payment strong span,
body[data-brand="beeline2"] .nl-selected-tariff-summary-details strong{
  color: var(--b2-ink);
}

/* Кнопка «Активировать номер» без стрелки: у партнёрской раскладки она
   дорисовывается псевдоэлементом (лаймовый кружок со стрелкой). */
body[data-brand="beeline2"] .nl-direct-activation-btn::after{
  content: none;
}

/* ---------- Кнопка «Активировать номер»: инверсия целиком ----------
   Партнёрский слой на наведении меняет только фон на тёмный, а цвет текста
   остаётся тёмным — надпись пропадала. Инвертируем и текст. */
body[data-brand="beeline2"] .nl-direct-activation-btn:hover,
body[data-brand="beeline2"] .nl-direct-activation-btn:active,
body[data-brand="beeline2"] .nl-direct-activation-btn:focus-visible{
  background: var(--b2-invert-bg);
  color: var(--b2-invert-ink);
  filter: none;
}

/* ---------- FAQ и «Другие действия» — одна пара ----------
   Раскладка красит «Другие действия» в жёлтый на :hover/:active/:focus
   (и отдельно на тач-устройствах), а FAQ в тот список не входит — отсюда
   разные цвета. Задаём обеим кнопкам одинаковые состояния.
   Скругление у FAQ выравниваем по «Другим действиям». */
body[data-brand="beeline2"] .nl-faq-anchor-btn,
body[data-brand="beeline2"] .nl-other-actions-btn{
  border: 1px solid var(--b2-line-strong);
  border-radius: 999px;
  background: var(--b2-surface);
  color: var(--b2-ink);
  box-shadow: none;
}
body[data-brand="beeline2"] .nl-faq-anchor-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .nl-other-actions-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .nl-faq-anchor-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .nl-other-actions-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]){
  /* Рамку задаём целиком: у FAQ партнёрское правило на наведении ставит
     border:0, кнопка теряла 2px и дёргала раскладку. */
  border: 1px solid var(--b2-accent);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
  filter: none;
  transform: none;
}

/* Ширина подсказки по содержимому: фиксированные 230px рвали короткие тексты
   на строки. Обрезку карточкой чиним в style.css — она общая с NL. */
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card .tariff-badge::after{
  width: max-content;
  max-width: min(300px, 68vw);
  white-space: normal;
}


/* =========================================================
   Карточка тарифа: один вид в заказе SIM и в форме заявки
   Разметка у них одинаковая (шапка с названием и кнопкой, метрики,
   блок оплаты, выбор другого тарифа), поэтому и оформление общее.
   Геометрия взята из заказа SIM, цвета — из токенов темы.
   ========================================================= */
body[data-brand="beeline2"] .delivery-item-tariff-card,
body[data-brand="beeline2"] .nl-selected-tariff-summary{
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--b2-line);
  border-radius: 18px;
  background: var(--b2-surface);
  box-shadow: none;
}

body[data-brand="beeline2"] .delivery-item-tariff-head,
body[data-brand="beeline2"] .nl-selected-tariff-summary-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 14px 10px;
  border: 0;
  background: none;
}
body[data-brand="beeline2"] .delivery-item-tariff-title,
body[data-brand="beeline2"] .nl-selected-tariff-summary-head > div{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
body[data-brand="beeline2"] #step-data .delivery-item-tariff-title .mini-label,
body[data-brand="beeline2"] .delivery-item-tariff-title .mini-label,
body[data-brand="beeline2"] .nl-selected-tariff-label{
  margin: 0;
  color: var(--b2-ink-3);
  font-size: 12px;
  font-weight: 700;
}
body[data-brand="beeline2"] .delivery-item-tariff-title > strong,
body[data-brand="beeline2"] #nl-selected-tariff-summary-name{
  overflow: hidden;
  color: var(--b2-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Кнопка «Изменить тариф» — в общем нейтральном стиле (см. ниже). */
body[data-brand="beeline2"] .delivery-item-change-tariff,
body[data-brand="beeline2"] .nl-form-change-tariff-btn{
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Подложка с метриками и ценой. */
body[data-brand="beeline2"] .delivery-item-tariff-details,
body[data-brand="beeline2"] .nl-selected-tariff-summary-details{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, .38fr);
  gap: 7px;
  margin: 0 7px 7px;
  padding: 7px;
  border: 0;
  border-radius: 15px;
  background: var(--b2-surface-3);
}
body[data-brand="beeline2"] .delivery-item-tariff-metrics,
body[data-brand="beeline2"] .nl-selected-tariff-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  min-height: 60px;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 11px;
  background: var(--b2-surface);
}
body[data-brand="beeline2"] .delivery-item-tariff-metric,
body[data-brand="beeline2"] .nl-selected-tariff-metric{
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;
}
/* Наполнение у номера доставки идёт по строке на параметр (style.css, правило
   .delivery-item-tariff-metrics): три колонки и центрирование из правил выше
   здесь снимаем, иначе тема вернула бы прежнюю раскладку — селекторы с
   body[data-brand] весомее. Блока «Выбран тариф» это не касается. */
body[data-brand="beeline2"] .delivery-item-tariff-metrics{
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 10px;
}
body[data-brand="beeline2"] .delivery-item-tariff-metric{
  justify-content: flex-start;
}
body[data-brand="beeline2"] .delivery-item-tariff-metric .tariff-metric-value,
body[data-brand="beeline2"] .nl-selected-tariff-metric .tariff-metric-value{
  color: var(--b2-ink);
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.035em;
}
body[data-brand="beeline2"] .delivery-item-tariff-metric.is-unlimited .tariff-metric-value,
body[data-brand="beeline2"] .nl-selected-tariff-metric.is-unlimited .tariff-metric-value{
  font-size: 27px;
  font-weight: 600;
  line-height: .75;
}
body[data-brand="beeline2"] .delivery-item-tariff-metric .tariff-metric-unit,
body[data-brand="beeline2"] .nl-selected-tariff-metric .tariff-metric-unit{
  color: var(--b2-ink-3);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  text-transform: lowercase;
}

body[data-brand="beeline2"] .delivery-item-tariff-payment,
body[data-brand="beeline2"] .nl-selected-tariff-payment{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 9px;
  border: 0;
  border-radius: 11px;
  background: var(--b2-surface);
  text-align: center;
}
body[data-brand="beeline2"] .delivery-item-tariff-billing,
body[data-brand="beeline2"] .nl-selected-tariff-billing{
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(var(--b2-accent-rgb), .22);
  color: var(--b2-ink);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}
body[data-brand="beeline2"] .delivery-item-tariff-payment strong,
body[data-brand="beeline2"] .nl-selected-tariff-payment strong{
  color: var(--b2-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
body[data-brand="beeline2"] .delivery-item-tariff-payment strong span,
body[data-brand="beeline2"] .nl-selected-tariff-payment strong span{
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.035em;
}

/* Выбор другого тарифа. */
body[data-brand="beeline2"] .delivery-item-tariff-picker,
body[data-brand="beeline2"] .nl-form-tariff-picker{
  margin: 0 14px 14px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--b2-line);
  background: none;
}
body[data-brand="beeline2"] .delivery-item-tariff-picker-head,
body[data-brand="beeline2"] .nl-form-tariff-picker-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: var(--b2-ink);
  font-size: 13px;
}
body[data-brand="beeline2"] .delivery-item-tariff-picker-head button,
body[data-brand="beeline2"] .nl-form-tariff-picker-close{
  min-height: 0;
  padding: 5px 9px;
  border: 1px solid var(--b2-line);
  border-radius: 999px;
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
body[data-brand="beeline2"] .delivery-item-tariff-picker-head button:hover,
body[data-brand="beeline2"] .nl-form-tariff-picker-close:hover{
  border-color: var(--b2-accent);
  background: var(--b2-surface-3);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-item-tariff-option{
  border: 1px solid var(--b2-line);
  border-radius: 13px;
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-item-tariff-option:is(:hover, :focus-visible){
  border-color: var(--b2-line-strong);
  box-shadow: var(--b2-shadow-sm);
}
body[data-brand="beeline2"] .delivery-item-tariff-option.is-selected{
  border-color: var(--b2-accent);
  background: rgba(var(--b2-accent-rgb), .14);
  box-shadow: inset 0 0 0 1px var(--b2-accent);
}
body[data-brand="beeline2"] .delivery-item-tariff-option-price{
  color: var(--b2-ink);
}

/* =========================================================
   Заказ SIM: остальные блоки в тёмной теме
   ========================================================= */
body[data-brand="beeline2"] .delivery-selected-item{
  border: 1px solid var(--b2-line);
  border-radius: 22px;
  background: var(--b2-surface-2);
}
body[data-brand="beeline2"] .delivery-selected-item-head strong{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-selected-item-remove{
  background: var(--b2-surface-3);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-selected-item-remove:hover{
  background: var(--b2-accent);
  color: var(--b2-on-accent);
}
body[data-brand="beeline2"] .delivery-item-intent{
  border: 1px solid var(--b2-line);
  border-radius: 18px;
  background: var(--b2-surface);
}
body[data-brand="beeline2"] .delivery-item-intent .mini-label{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .delivery-method-card,
body[data-brand="beeline2"] .delivery-number-option,
body[data-brand="beeline2"] .delivery-number-group,
body[data-brand="beeline2"] .delivery-city-box{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-method-card:has(input:checked),
body[data-brand="beeline2"] .delivery-number-option.selected,
body[data-brand="beeline2"] .delivery-number-option[aria-pressed="true"]{
  border-color: var(--b2-accent);
  background: rgba(var(--b2-accent-rgb), .14);
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-method-title,
body[data-brand="beeline2"] .delivery-number-value{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .delivery-method-text,
body[data-brand="beeline2"] .delivery-method-price,
body[data-brand="beeline2"] .delivery-number-hint{
  color: var(--b2-ink-3);
}
/* ---------- Цена на карточке способа получения ----------
   Раскладка инвертирует выбранную карточку (чёрный фон) и красит цену в белый.
   У Билайн 2.0 выбранная карточка светлая — жёлтая заливка в 14%, и белая цена
   на ней в светлой теме просто исчезает. Селектор повторяет форму базового
   (.delivery-method-card:has(input:checked) .delivery-method-price), поэтому
   выигрывает по специфичности и работает в обеих темах. */
body[data-brand="beeline2"] .delivery-method-card:hover .delivery-method-price,
body[data-brand="beeline2"] .delivery-method-card:has(input:checked) .delivery-method-price{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .delivery-method-card:hover .delivery-method-title,
body[data-brand="beeline2"] .delivery-method-card:has(input:checked) .delivery-method-title{
  color: var(--b2-ink);
}

/* ---------- Залипший :hover после касания ----------
   На телефоне :hover остаётся на элементе до касания в другом месте, поэтому
   раскладка гасит наведение отдельными наборами правил: класс .nl-touch-input
   (его ставит script.js на первом касании) и @media (hover:none) в style.css.
   Гасит она их белым фоном и чёрным текстом — цветами партнёрской схемы.
   Для Билайн 2.0 это и есть баг: в тёмной теме карточка «Способ получения
   SIM-карты» после случайного касания вспыхивала белым и такой оставалась.
   Повторяем те же селекторы в токенах темы: форма селектора совпадает с
   партнёрской, а этот файл подключается позже, поэтому выигрывает.
   Нужны оба набора: .nl-touch-input не успевает появиться до первого касания,
   а @media не срабатывает на гибридных устройствах с «точным» указателем. */
body[data-brand="beeline2"].nl-touch-input .delivery-method-card:is(:hover, :active, :focus):not(:has(input:checked)),
body[data-brand="beeline2"].nl-touch-input .delivery-number-option:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
}
body[data-brand="beeline2"].nl-touch-input .delivery-method-card:is(:hover, :active, :focus):not(:has(input:checked)) .delivery-method-price{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"].nl-touch-input .delivery-method-card:is(:hover, :active, :focus):not(:has(input:checked)) .delivery-method-title{
  color: var(--b2-ink);
}

/* Кнопки: на касании раскладка заливает их жёлтым NL (--nl-action-color).
   Второстепенные («Выбрать файл», «Поддержка», «Назад») из-за этого после
   тапа оставались жёлтыми вместо контурных, а основные теряли акцент точки,
   если он отличается от жёлтого. Основную группу отделяем :not(.secondary):
   вторичный вид .beeline-btn.secondary описан выше и должен остаться. */
body[data-brand="beeline2"].nl-touch-input :is(
  .btn-secondary,
  .file-upload-btn,
  .support-btn
):is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]){
  border: 1px solid var(--b2-line-strong);
  background: var(--b2-surface);
  color: var(--b2-ink);
  box-shadow: none;
  filter: none;
  transform: none;
}
body[data-brand="beeline2"].nl-touch-input :is(
  .beeline-btn,
  .btn-primary
):is(:hover, :active, :focus):not(.secondary):not(.active):not([aria-pressed="true"]){
  border: 0;
  background: var(--b2-accent);
  color: var(--b2-on-accent);
  box-shadow: none;
  filter: none;
  transform: none;
}

@media (hover:none), (pointer:coarse){
  body[data-brand="beeline2"] .delivery-method-card:is(:hover, :active, :focus):not(:has(input:checked)),
  body[data-brand="beeline2"] .delivery-number-option:is(:hover, :active, :focus):not(.selected):not([aria-pressed="true"]){
    border-color: var(--b2-line);
    background: var(--b2-surface-2);
    color: var(--b2-ink);
  }
  body[data-brand="beeline2"] .delivery-method-card:is(:hover, :active, :focus):not(:has(input:checked)) .delivery-method-price{
    color: var(--b2-ink-3);
  }
  body[data-brand="beeline2"] .delivery-method-card:is(:hover, :active, :focus):not(:has(input:checked)) .delivery-method-title{
    color: var(--b2-ink);
  }
  body[data-brand="beeline2"] :is(
    .btn-secondary,
    .file-upload-btn,
    .support-btn
  ):is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]){
    border: 1px solid var(--b2-line-strong);
    background: var(--b2-surface);
    color: var(--b2-ink);
    box-shadow: none;
    filter: none;
    transform: none;
  }
  body[data-brand="beeline2"] :is(
    .beeline-btn,
    .btn-primary
  ):is(:hover, :active, :focus):not(.secondary):not(.active):not([aria-pressed="true"]){
    border: 0;
    background: var(--b2-accent);
    color: var(--b2-on-accent);
    box-shadow: none;
    filter: none;
    transform: none;
  }
}
body[data-brand="beeline2"] .delivery-form-progress{
  border-color: var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}

/* ---------- Панель с выбранными номерами («Оформить») ----------
   Партнёрская раскладка рисует её стеклянной: белый радиальный блик поверх
   бело-салатового градиента, а на узких экранах он ещё и ездит анимацией
   (background-size: 260%). На тёмном фоне переход от rgba(255,255,255,.92)
   к прозрачному ложится видимыми полосами — это банding 8-битного градиента,
   на светлом фоне тех же ступеней глазу не видно.
   Берём свои поверхности: разница между surface-3 и surface-2 мала, поэтому
   ступеней не остаётся, а форма «объёма» сохраняется. Блик оставляем, но
   акцентный и еле заметный.
   Свойства анимации гасим явно: правило раскладки живёт в @media и задаёт
   background-size/position/animation отдельными строками — одна лишь замена
   background их не отменяет. */
body[data-brand="beeline2"] .delivery-form-progress,
body[data-brand="beeline2"] .delivery-form-progress-finished{
  background-size: auto;
  background-position: 0 0;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-brand="beeline2"] .delivery-form-progress-finished{
  border-color: var(--b2-line);
  background:
    radial-gradient(140% 110% at 20% 0%, rgba(var(--b2-accent-rgb), .10), rgba(var(--b2-accent-rgb), 0) 62%),
    linear-gradient(165deg, var(--b2-surface-3) 0%, var(--b2-surface-2) 100%);
  box-shadow: none;
  color: var(--b2-ink);
}
/* Салатовое пятно в углу: тот же приём — акцент точки, шире размытие,
   меньше плотность, иначе на тёмном видна его граница. */
body[data-brand="beeline2"] .delivery-form-progress-finished::after{
  background: rgba(var(--b2-accent-rgb), .14);
  filter: blur(40px);
}
/* Кружок с галочкой нарисован почти чёрным (#050505) — на тёмной карточке
   он пропадал. Делаем светлую полупрозрачную плашку, галочку не трогаем. */
body[data-brand="beeline2"][data-theme="dark"] .delivery-form-progress-finished::before{
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* ---------- Плашка-предупреждение внутри карточки типа заявки ----------
   Раскладка задаёт ей белый фон, а на инвертированной карточке — чёрный.
   Переводим на токены: в покое поверхность, на инверсии — светлый текст. */
body[data-brand="beeline2"] .flow-card-warning{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-3);
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .flow-card:hover .flow-card-warning,
body[data-brand="beeline2"] .flow-card:active .flow-card-warning,
body[data-brand="beeline2"] .flow-card.active .flow-card-warning,
body[data-brand="beeline2"] .flow-card.selected .flow-card-warning,
body[data-brand="beeline2"] .flow-card[aria-pressed="true"] .flow-card-warning{
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
  color: var(--b2-invert-ink);
}
/* На тач-устройствах раскладка отменяет инверсию и возвращает карточке белый
   фон — в тёмной теме это выглядело вспышкой. Держим её в цветах темы. */
body[data-brand="beeline2"] .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]){
  border-color: var(--b2-line-strong);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
}
body[data-brand="beeline2"] .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]) .flow-card-title,
body[data-brand="beeline2"].nl-touch-input .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]) .flow-card-title{
  color: var(--b2-ink);
}
body[data-brand="beeline2"] .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]) .flow-card-text,
body[data-brand="beeline2"].nl-touch-input .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]) .flow-card-text{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]) .flow-card-warning,
body[data-brand="beeline2"].nl-touch-input .flow-card:is(:hover, :active, :focus):not(.active):not(.selected):not([aria-pressed="true"]) .flow-card-warning{
  border-color: var(--b2-line);
  background: var(--b2-surface-3);
  color: var(--b2-ink-2);
}


/* =========================================================
   Второстепенные кнопки — один стиль с «Другие действия»
   Раскладка красит их в жёлтый (в покое или на :hover/:active/:focus),
   из-за чего они выбивались из темы и отличались друг от друга.
   ========================================================= */
body[data-brand="beeline2"] .nl-other-actions-btn,
body[data-brand="beeline2"] .nl-change-tariff-btn,
body[data-brand="beeline2"] .nl-form-change-tariff-btn,
body[data-brand="beeline2"] .nl-direct-back-btn,
body[data-brand="beeline2"] .delivery-item-change-tariff,
body[data-brand="beeline2"] .delivery-item-tariff-picker-head button,
body[data-brand="beeline2"] .nl-form-tariff-picker-close{
  border: 1px solid var(--b2-line-strong);
  border-radius: 999px;
  background: var(--b2-surface);
  color: var(--b2-ink);
  box-shadow: none;
}
body[data-brand="beeline2"] .nl-other-actions-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .nl-change-tariff-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .nl-form-change-tariff-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .nl-direct-back-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .delivery-item-change-tariff:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .delivery-item-tariff-picker-head button:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"] .nl-form-tariff-picker-close:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .nl-other-actions-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .nl-change-tariff-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .nl-form-change-tariff-btn:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .delivery-item-change-tariff:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]),
body[data-brand="beeline2"].nl-touch-input .nl-form-tariff-picker-close:is(:hover, :active, :focus):not(.active):not([aria-pressed="true"]){
  /* Рамка целиком: часть правил раскладки ставит border:0, и кнопка теряла 2px. */
  border: 1px solid var(--b2-accent);
  background: var(--b2-surface-2);
  color: var(--b2-ink);
  box-shadow: none;
  filter: none;
  transform: none;
}

/* Заголовок «Выберите другой тариф» и названия тарифов в списке заданы без
   классов (strong), поэтому правила по классам их не доставали. */
body[data-brand="beeline2"] .delivery-item-tariff-picker-head > strong,
body[data-brand="beeline2"] .nl-form-tariff-picker-head > strong,
body[data-brand="beeline2"] .delivery-item-tariff-option-copy > strong,
body[data-brand="beeline2"] .delivery-item-tariff-option-price b,
body[data-brand="beeline2"] .delivery-selected-item-head > strong{
  color: var(--b2-ink);
}

/* ---------- Круглые иконки: поддержка в шапке и соцсети в подвале ----------
   Раскладка красит их на наведении в чёрный фон, а цвет иконки задавался
   отдельно — в светлой теме иконка пропадала на чёрном. Задаём оба цвета
   вместе и одинаково для обеих тем. */
body[data-brand="beeline2"] .nl-footer-social,
body[data-brand="beeline2"] .nl-faq-support-icon{
  border: 1px solid var(--b2-line);
  background: var(--b2-surface-2);
  color: var(--b2-ink-2);
}
body[data-brand="beeline2"] .nl-footer-social:is(:hover, :active, :focus-visible),
body[data-brand="beeline2"] .nl-faq-support-icon:is(:hover, :active, :focus-visible),
body[data-brand="beeline2"].nl-touch-input .nl-footer-social:is(:hover, :active, :focus-visible),
body[data-brand="beeline2"].nl-touch-input .nl-faq-support-icon:is(:hover, :active, :focus-visible){
  border-color: var(--b2-accent);
  background: rgba(var(--b2-accent-rgb), .18);
  color: var(--b2-ink);
  text-decoration: none;
}
body[data-brand="beeline2"] .nl-footer-social svg,
body[data-brand="beeline2"] .nl-faq-support-icon svg{
  fill: currentColor;
}

/* ---------- Шапка на телефоне ----------
   Логотип слева, переключатель темы справа — в одной строке. Кнопка активации
   уходит на свою строку под ними и занимает всю ширину.

   display:contents убирает коробку .brand-header-actions, и кнопка с
   переключателем раскладываются прямо в сетке шапки. Иначе они всегда
   переносятся вдвоём: строка нужна кнопке, а переключатель уезжал за компанию
   и оставался висеть под логотипом в одиночестве. */
@media (max-width: 720px){
  /* Базовый мобильный CSS кладёт шапку в колонку (style.css, @media 520px):
     в колонке логотип и переключатель физически не могут стоять рядом.
     Возвращаем строку — !important нужен, чтобы перебить базовое правило,
     специфичности селектора для этого хватает. */
  body[data-brand="beeline2"] .consent-header{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  body[data-brand="beeline2"] .consent-header .brand-header-actions{
    display: contents;
  }
  body[data-brand="beeline2"] .consent-header .theme-toggle{
    order: 4;
    flex: 0 0 var(--b2-theme-toggle-size, 40px);
    margin-left: auto;
  }
  /* «Статус заявки» — на своей строке под логотипами и переключателем темы,
     во всю ширину экрана. С логотипом партнёра шапка перестала помещаться в
     одну строку, и кнопка переносилась вниз вместе с переключателем темы. */
  body[data-brand="beeline2"] .consent-header .b2-status-btn{
    order: 5;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
  /* Правило выше (.b2-header-btn + .theme-toggle) снимает у переключателя
     margin-left:auto — вправо его прижимала соседняя кнопка. Теперь кнопка на
     своей строке, поэтому переключатель прижимается вправо сам. */
  body[data-brand="beeline2"] .consent-header .b2-status-btn + .theme-toggle{
    margin-left: auto;
  }
  /* Селектор с id повторяет форму партнёрского правила (@media max-width:520px),
     которое возвращает кнопке width:auto. */
  body[data-brand="beeline2"] .nl-direct-activation-btn,
  body[data-brand="beeline2"] #flow-start-container .nl-direct-activation-btn{
    order: 5;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  /* Заголовки — ниже кнопки активации, как и на большом экране. */
  body[data-brand="beeline2"] .consent-header .consent-titles{
    order: 6;
  }
  /* На странице «заявка отправлена» в действиях только переключатель:
     коробку не разбираем, ей хватает места рядом с логотипом. */
  body.success-page[data-brand="beeline2"] .brand-header-actions{
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }
}

/* ---------- Скидка на тариф ----------
   Раскладка красит старую цену и подпись в серый #8A8F98/#55585C — на
   тёмной теме их не видно. Переводим на токены. */
body[data-brand="beeline2"] .tariff-price-old,
body[data-brand="beeline2"] .tariff-price-note,
body[data-brand="beeline2"] .tariff-subchip-note,
body[data-brand="beeline2"] .nl-flow-tariff-price-note,
body[data-brand="beeline2"] .nl-tariff-details-price-note{
  color: var(--b2-ink-3);
}
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-price-old,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-price-old,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-price-old,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:hover .tariff-price-note,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card:focus-visible .tariff-price-note,
body[data-brand="beeline2"] .tariff-card.nl-start-tariff-card.selected .tariff-price-note{
  color: var(--b2-invert-ink-2);
}