/* Внутренние страницы лендинга: Выделенные серверы, Партнёрам, Контакты,
   События и выгода, Оплата, F.A.Q.

   Палитра и типографика — из style.css (те же переменные), здесь только
   компоненты, которых нет на главной. */

/* Активный пункт меню — подсвеченная «таблетка», как в макете */
.nav__link.is-active, .menu__btn.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 700;
}

/* Переключатель языка */
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 0; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px;
}
.lang__btn:hover { background: rgba(255, 255, 255, 0.18); }
.lang .menu__list { left: auto; right: 0; min-width: 190px; padding: 8px; }
.lang__cur, .lang__soon { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; }
.lang__cur { background: #eef1fd; color: #101a44; font-weight: 700; }
.lang__soon { color: #6a72a0; }

/* ---------- Шапка страницы ---------- */

.page-hero { position: relative; background: var(--bg-hero); padding: 46px 0 var(--block-gap); overflow: hidden; }
.page-hero--center { text-align: center; padding-bottom: 30px; }
.page-hero--center .ttl { margin-inline: auto; }
.page-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.page-hero__lead { margin: 16px 0 0; color: var(--text-dim); font-size: 16px; }
/* Рядом с иллюстрацией строки держим короче: иначе хвост строки подходит
   вплотную к рисунку и читается как наезд на него. Ширина подобрана по макету —
   при ней абзац ломается ровно по словам, как нарисовал дизайнер. */
.page-hero__in .page-hero__lead { max-width: 520px; }
.page-hero__sub { margin: 18px 0 14px; font-size: 20px; font-weight: 700; }
.page-hero__art { justify-self: end; width: min(38vw, 430px); }
/* Иллюстрация выше текстовой колонки, и на короткой вкладке под текстом
   оставалась дыра. Выравниваем колонку по центру рисунка — пустота делится
   поровну сверху и снизу. */
.page-hero--middle .page-hero__in { align-items: center; }
.contacts { position: relative; width: 340px; }
/* Рисунок стоит за колонкой контактов; отсчёт от неё, поэтому смещаем вверх,
   чтобы он занимал всю высоту блока, как в макете. */
.contacts__art {
  position: absolute; left: 50%; top: -142px; z-index: 0;
  transform: translateX(-50%);
  width: min(30vw, 384px);
}
.contacts > .contact { position: relative; z-index: 1; }
.page-hero__in > *:not(.page-hero__art) { position: relative; z-index: 1; }
.page-hero__art--pay { width: min(32vw, 360px); }

/* Заголовок страницы: часть слова акцентом, как в макете */
.ttl { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.22; font-weight: 700; }
.ttl em { font-style: normal; color: var(--accent-text); }
.ttl--faq { letter-spacing: 0.06em; }

/* Контакты: список «чем поможем» */
.checks { display: grid; gap: 10px; margin-top: 26px; max-width: 460px; }
.check {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 15px;
}
.check::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: var(--accent-text);
  -webkit-mask: var(--icon-check) no-repeat center / contain;
  mask: var(--icon-check) no-repeat center / contain;
}

/* Контакты: пары «канал → адрес» */
/* Контакты идут в такт с плашками слева: тот же шаг строк, а вся колонка
   прижата к низу — тогда первая строка встаёт напротив первой плашки, а под
   колонкой не остаётся дыры. */
.contacts { display: grid; gap: 10px; align-content: end; align-self: end; }
.contact { min-height: 47px; }
.contact { display: grid; grid-template-columns: 190px auto; align-items: center; gap: 14px; }
.contact__label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.contact__label svg { color: var(--accent-text); flex: none; }
.contact a { color: var(--accent-text); font-size: 15px; }
.contact a:hover { text-decoration: underline; }

/* Баннер «Нелегальная активность» */
.abuse {
  color: #fff;
  /* Цвет взят из самой картинки, поэтому стыка между фоном секции и рисунком не видно */
  background: var(--abuse-bg);
  overflow: hidden;
}
.abuse__in { position: relative; min-height: 300px; display: flex; align-items: center; }
/* Картинка живёт внутри контейнера (не во всю ширину экрана) — так человек
   оказывается ровно под колонкой контактов. Левый край растворяем маской. */
.abuse__in::after {
  content: "";
  position: absolute;
  /* Контейнер по центру страницы, а рисунок должен доходить до края экрана —
     иначе справа остаётся полоса фона другого оттенка */
  inset: -1px calc(50% - 50vw) -1px 0;
  /* Рисунок прижат к правому краю: раньше он уезжал за экран и щит обрезался */
  background: var(--abuse-art) right center / auto 100% no-repeat;
  /* Растворяем ТОЛЬКО левый край — там рисунок переходит в фон секции.
     Справа растворение съедало часть картинки и выглядело как размытие. */
  -webkit-mask: linear-gradient(90deg, transparent 4%, #000 34%, #000 100%);
  mask: linear-gradient(90deg, transparent 4%, #000 34%, #000 100%);
}
.abuse__text { position: relative; z-index: 1; padding: var(--block-gap) 0; }
.abuse h2 { margin: 0 0 14px; font-size: clamp(20px, 2.4vw, 30px); }
.abuse p { margin: 0; max-width: 560px; color: rgba(255, 255, 255, 0.85); font-size: 15px; }
.abuse a { color: #9fc0ff; }
.abuse a:hover { text-decoration: underline; }
:root[data-theme="light"] .abuse { color: var(--text); }
:root[data-theme="light"] .abuse p { color: #38446f; }
:root[data-theme="light"] .abuse a { color: var(--accent-text); }

/* Юридические данные */
.legal { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; }
.legal h2 { margin: 0 0 22px; font-size: clamp(22px, 2.4vw, 30px); }
.legal h3 { margin: 18px 0 6px; font-size: 15px; }
.legal h4 { margin: 0 0 16px; font-size: 17px; }
.legal p { margin: 0; color: var(--text-dim); font-size: 15px; }
.legal__req { margin: 0; display: grid; gap: 10px; }
.legal__req > div { display: flex; gap: 8px; font-size: 15px; color: var(--text-dim); }
.legal__req dt, .legal__req dd { margin: 0; }
.legal__req dd { color: var(--text); }

/* ---------- Оплата ---------- */

.pays { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 620px; }
.pay {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 15px;
}
.pay img { height: 22px; width: auto; }
.lead-text { max-width: 820px; margin: 0 auto 30px; color: var(--text-dim); font-size: 15px; }

/* ---------- Пара карточек (повторяется на нескольких страницах) ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo__card {
  position: relative;
  padding: 26px;
  /* Та же заливка, что у карточек «Почему мы» — блоки читаются как один набор */
  background: var(--card-why); border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Текст держится левее иконки: под неё он не заходит ни одной строкой.
   Резерв шире самой иконки — между текстом и рисунком остаётся воздух,
   строки ломаются так же, как в макете. */
.duo__card { container-type: inline-size; }
.duo__card h3, .duo__card p { max-width: calc(100% - 140px); }
/* В узкой карточке (две колонки на неширокой странице) такой отступ съедал бы
   половину строки — оставляем ровно зону иконки. */
@container (max-width: 480px) {
  .duo__card h3, .duo__card p { max-width: calc(100% - 104px); }
}
.duo__card--accent { background: var(--card-why); }
.duo__card h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.25; }
/* Вторая строка заголовка резервируется всегда: в паре карточек описания
   должны начинаться на одной линии, а перенос зависит от длины слов и языка. */
.duo__card h3 { min-height: 2.5em; }
/* Уточнение к заголовку — не мелкий текст: крупнее описания и жирнее его,
   но заметно меньше самого заголовка */
.duo__card h3 span {
  display: block; margin-top: 6px;
  font-size: 16px; font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
:root[data-theme="light"] .duo__card h3 span { color: var(--text-dim); }
.duo__card p { margin: 0; color: var(--text-dim); font-size: 14px; }
/* height: auto + contain — иконки у дизайнера не квадратные, жёсткий размер их плющил */
.duo__card img {
  position: absolute; right: 22px; top: 24px;
  width: 92px; height: auto; max-height: 96px; object-fit: contain;
}
.duo__card a { color: var(--accent-text); text-decoration: underline; }

/* ---------- Аккордеоны: F.A.Q. и правила ---------- */

.faq { --faq-gap: 12px; display: grid; gap: var(--faq-gap); }
/* Заголовок группы вопросов живёт по тем же правилам, что заголовок секции:
   сверху — общий ритм блоков, снизу — общий отступ до содержимого. Заголовок
   лежит внутри сетки вопросов, поэтому к его отступу добавляется ещё и gap —
   вычитаем его, иначе под этими заголовками зазор был больше остальных. */
.faq__group {
  margin: calc(var(--block-gap) - var(--faq-gap)) 0 calc(var(--head-gap) - var(--faq-gap));
  text-align: center; font-size: clamp(21px, 2.4vw, 30px);
}
.faq__group--sm { font-size: clamp(18px, 2vw, 24px); color: var(--text-dim); }
.faq__group:first-child { margin-top: 0; }

.acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.acc[open] { background: var(--surface-2); }
/* Раскрытый аккордеон: голубой остаётся только у шапки, само содержимое — на
   светлом фоне. На голубом текст правил читался тяжело. */
:root[data-theme="light"] .acc[open] { background: var(--surface); }
:root[data-theme="light"] .acc__body { background: #fff; }
/* Плашка правил идёт следом за схемой «как это работает» — ей нужен воздух,
   иначе читается как продолжение последнего шага */
.acc--wide { margin-top: 56px; }
.acc summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; margin-left: auto; width: 14px; height: 9px;
  background: currentColor; transition: transform 0.2s;
  -webkit-mask: var(--icon-chevron) no-repeat center / contain;
  mask: var(--icon-chevron) no-repeat center / contain;
}
.acc[open] summary::after { transform: rotate(180deg); }
.acc[open] summary { border-bottom: 1px solid var(--border); }
.acc__body { padding: 20px 26px 24px; color: var(--text-dim); font-size: 14.5px; }
/* Цветом отделяем смысл от воды: ответы и текст документов — основным
   цветом, подводки и сноски остаются приглушёнными. */
.faq .acc__body { color: var(--text); }
/* Сами правила — основным цветом текста: это то, что человек читает построчно */
.rule { color: var(--text); }
.acc__body p { margin: 0 0 12px; }
.acc__body b { color: var(--text); }
.acc__body ul { margin: 0 0 14px; padding-left: 22px; }
.acc__body li { margin-bottom: 6px; }
.acc__body a { color: var(--accent-text); text-decoration: underline; }
.acc__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-mute); }
.acc--wide summary { justify-content: center; font-size: 17px; }
.acc--wide summary::after { margin-left: 0; }

.rules { display: grid; gap: 14px; margin: 16px 0; }
.rule { position: relative; padding-left: 30px; }
.rule::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  background: var(--accent-text);
  -webkit-mask: var(--icon-check) no-repeat center / contain;
  mask: var(--icon-check) no-repeat center / contain;
}

/* ---------- Партнёрам ---------- */

.switch { display: inline-flex; gap: 5px; padding: 5px; background: var(--surface); border-radius: var(--radius-md); }
.switch__btn {
  padding: 10px 22px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim); font-size: 15px;
}
.switch__btn[aria-selected="true"] { background: var(--primary); color: #fff; font-weight: 700; }

.steps { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.steps__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.steps__list li { position: relative; padding-left: 62px; }
.steps__num { position: absolute; left: 0; top: 0; height: 44px; width: auto; }
.steps__list h3 { margin: 0 0 7px; font-size: 22px; }
.steps__list p { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.steps__art {
  justify-self: center; align-self: center;
  width: auto; max-width: 100%;
  max-height: 420px;         /* примерно высота колонки шагов — картинка больше не торчит */
  object-fit: contain;
}

/* Форма заявки на партнёрский кабинет */
.form { padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form__grid > div { display: flex; flex-direction: column; gap: 14px; }
.field { display: grid; gap: 7px; font-size: 14px; }
.field--grow { flex: 1; }
.field i { font-style: normal; color: var(--text-mute); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--chip); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font: inherit; font-size: 15px;
}
.field textarea { min-height: 132px; height: 100%; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.form__submit { justify-content: center; width: 100%; }
.form__msg { margin: 16px 0 0; font-size: 14px; }
.form__msg.is-ok { color: #22c55e; }
.form__msg.is-err { color: #f87171; }

/* ---------- События и выгода ---------- */

.news { position: relative; display: flex; align-items: center; gap: 12px; }
/* Лента шире контейнера: одна карточка всегда «в запасе» за краем */
.news__viewport { flex: 1; overflow: hidden; padding: 4px 0; }
.news__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
}
/* Карточка — готовая картинка от дизайнера. Текст в ней светло-серый по синему
   (контраст 2.3:1), поэтому левую часть, где лежит текст, слегка притеняем. */
/* Карточка — готовая картинка дизайнера целиком: текст в ней вшит.
   Контраст описания и даты внутри картинки 2.3:1 — поправить можно только
   перерисовкой (или отдельным вариантом картинки без текста). */
.news__card {
  width: 100%; height: auto; aspect-ratio: 820 / 683;
  object-fit: cover; border-radius: var(--radius);
}

.news__nav {
  flex: none; width: 34px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; color: var(--text-mute);
  transition: color 0.15s, transform 0.15s;
}
.news__nav:hover { color: var(--text); transform: scale(1.15); }

.promo {
  display: flex; align-items: center; gap: 18px;
  text-align: center;
  position: relative;
  margin-top: 20px; padding: 20px 90px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.promo p { margin: 0 auto; font-size: clamp(17px, 2vw, 22px); }
.promo__code { color: var(--accent-text); letter-spacing: 0.04em; }
.promo img { position: absolute; right: 26px; width: 64px; height: 64px; }

/* ---------- Выделенные серверы ---------- */

.dedic { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: start; }
.filters { display: grid; gap: 6px; align-content: start; }
.filters__title { margin: 12px 0 2px; font-size: 14px; font-weight: 400; color: var(--text-dim); }
.filters__title:first-child { margin-top: 0; }
.fld input::placeholder { color: var(--text-mute); opacity: 1; }
.fld select, .fld input {
  width: 100%; padding: 10px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font: inherit; font-size: 14px;
}
/* Своя стрелка вместо системной: та липла к самому краю поля. Отступ справа
   тот же, что у текста слева. */
.fld:has(select) { position: relative; display: block; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.fld:has(select)::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 12px; height: 8px; margin-top: -4px; pointer-events: none;
  background: var(--text); opacity: 0.75;
  -webkit-mask: var(--icon-chevron) no-repeat center / contain;
  mask: var(--icon-chevron) no-repeat center / contain;
}
.fld--range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.fld--range span { color: var(--text-mute); }
.filters__reset { margin-top: 18px; justify-content: center; }

/* «Сервер» — тот же заголовок-подпись, что и у фильтров, чтобы первая карточка
   встала вровень с первым полем фильтра */
.dedic__title {
  /* Стоит вровень с подписью первого фильтра, а отступ снизу подобран так,
     чтобы первая карточка встала на одну линию с первым полем */
  margin: 0 0 9px; padding-top: 0;
  font-size: 14px; font-weight: 400; color: var(--text-dim); line-height: 1.5;
}
.servers { display: grid; gap: 14px; }
.servers__empty {
  margin: 0; padding: 30px; text-align: center; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.servers__empty a { color: var(--accent-text); text-decoration: underline; }

/* Карточка сервера по макету: слева имя и страна, дальше три пары колонок
   «подпись: значение» в два ряда, справа кнопка. Подробности раскрываются
   кликом по карточке и отделяются линией — фон при этом не меняется. */
.srv {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
}
.srv:hover { border-color: rgba(24, 73, 210, 0.35); }
.srv__main {
  display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 3fr) auto;
  align-items: center; gap: 20px; padding: 20px 24px;
}
.srv__name span { display: block; color: var(--text-dim); font-size: 15px; }
.srv__name b { display: block; margin-top: 4px; font-size: 16px; }
/* Пары идут по колонкам: CPU/Ядра, RAM/Диск, Порт/Цена — как в макете */
.srv__specs {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(0, 1fr);
  gap: 10px 24px;
}
.srv__spec { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.srv__spec > span { color: var(--text-dim); }
.srv__spec > b { color: var(--text); font-weight: 700; }
.srv__spec small { font-size: 0.8em; font-weight: 700; }
.srv__order { align-self: center; }
.srv__details {
  display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 3fr);
  gap: 10px 20px; padding: 18px 24px 22px; margin: 0 24px;
  border-top: 1px solid var(--border);
}
.srv__full { display: grid; gap: 10px; }
.srv__desc { margin: 6px 0 0; color: var(--text-dim); font-size: 14px; }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.pager__btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px;
}
.pager__btn:hover:not(:disabled) { border-color: var(--primary); }
.pager__btn.is-active { background: var(--primary); color: #fff; font-weight: 700; }
.pager__btn:disabled { opacity: 0.4; cursor: default; }

/* Раньше эта секция шла плотнее остальных, и ритм страницы сбивался.
   Оставляем класс ради разметки, но отступ — общий. */
.section--tight { padding-top: var(--block-gap); }

/* ---------- Адаптив внутренних страниц ---------- */

@media (max-width: 1100px) {
  .dedic { grid-template-columns: 200px minmax(0, 1fr); }
  /* Узко: имя сверху, характеристики в две колонки, кнопка во всю ширину */
  .srv__main { grid-template-columns: 1fr; gap: 14px; }
  .srv__specs { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .srv__order { justify-content: center; }
  .srv__details { grid-template-columns: 1fr; margin: 0 16px; }
}

@media (max-width: 860px) {
  .page-hero__in { grid-template-columns: 1fr; }
  .page-hero__art { display: none; }
  /* В одну колонку прижимать контакты к низу незачем — идут сразу под списком */
  .contacts { padding-top: 26px; align-self: start; align-content: start; width: 100%; }
  .contact { min-height: 0; }
  .contact { grid-template-columns: 170px auto; }
  .duo, .legal, .steps, .form__grid { grid-template-columns: 1fr; }
  .steps__art { display: none; }
  .dedic { grid-template-columns: 1fr; }
  .news__track { grid-auto-columns: 82%; }
  .abuse { background: var(--abuse-bg); }
  .abuse__in { display: block; min-height: 0; }
  .abuse__in::after { display: none; }
  .abuse__text { padding: calc(var(--block-gap) * 0.6) 0; }
  .abuse p { max-width: none; }
}

@media (max-width: 620px) {
  /* Карточка стала узкой — иконку ужимаем, иначе тексту остаётся полоска */
  .duo__card img { width: 68px; max-height: 72px; right: 16px; top: 18px; }
  .duo__card h3, .duo__card p { max-width: calc(100% - 84px); }
}

@media (max-width: 560px) {
  .contact { grid-template-columns: 1fr; gap: 2px; }
  .promo { flex-direction: column; align-items: flex-start; padding: 20px 22px; text-align: left; }
  .promo p { margin: 0; }
  .promo img { position: static; margin: 0; }
  .news__track { grid-auto-columns: 90%; }
  .news__card h3, .news__card p { max-width: 74%; }
}

/* ---------- Документы (политика, правила) ---------- */

.doc { max-width: 860px; margin-inline: auto; }
.doc__lead {
  margin: 0 0 28px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-dim); font-size: 15px;
}
.doc h2 { margin: 30px 0 12px; font-size: 20px; }
.doc p { margin: 0 0 12px; color: var(--text); font-size: 15px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; color: var(--text); font-size: 15px; }
.doc li { margin-bottom: 8px; }
.doc b { color: var(--text); }
.doc a { color: var(--accent-text); text-decoration: underline; }

/* ---------- Статус сервисов ---------- */

.status { max-width: 860px; margin-inline: auto; }
.status__head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 19px;
}
.status__list { display: grid; gap: 10px; }
.status__row {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px;
  padding: 14px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 15px; color: var(--text-dim);
}
.status__row b { color: var(--text); font-size: 14px; }
.status__note { margin: 14px 0 30px; color: var(--text-mute); font-size: 14px; text-align: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot--ok { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16); }
.dot--bad { background: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16); }
.dot--wait { background: var(--text-mute); }

/* ---------- Looking Glass ---------- */

.nets { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.net {
  padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.net h3 { margin: 0 0 16px; font-size: 19px; }
.net__group { display: grid; gap: 8px; margin-bottom: 14px; }
.net__group > span { color: var(--text-mute); font-size: 13px; }
.net__list { display: flex; flex-wrap: wrap; gap: 8px; }
.net__list code, .cmd code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
}
.net__list code {
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--chip); border: 1px solid var(--border); color: var(--text);
}

.cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.cmd {
  padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.cmd h3 { margin: 0 0 12px; font-size: 18px; }
.cmd pre {
  margin: 0 0 12px; padding: 12px 14px; overflow-x: auto;
  background: var(--chip); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cmd p { margin: 0; color: var(--text-dim); font-size: 14px; }

/* ---------- 404 ---------- */

.nf { padding-bottom: 46px; }
.nf__code {
  font-size: clamp(64px, 12vw, 132px); font-weight: 700; line-height: 1;
  color: var(--accent-text); opacity: 0.45;
}
.nf__btns { margin-top: 26px; }
.nf__links a { justify-content: flex-start; }
.nf__links a:hover { border-color: var(--primary); }

@media (max-width: 860px) {
  .nets, .cmds { grid-template-columns: minmax(0, 1fr); }
}
.net, .cmd { min-width: 0; }
.cmd pre { max-width: 100%; }

/* Двойной ползунок диапазона в фильтрах выделенных серверов */
.rng { position: relative; height: 26px; margin: 2px 2px 4px; }
.rng__track, .rng__fill {
  position: absolute; top: 11px; height: 4px; border-radius: 2px;
}
.rng__track { left: 0; right: 0; background: var(--surface-2); }
.rng__fill { background: var(--primary); }
.rng__in {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 26px; margin: 0;
  background: none; pointer-events: none;   /* ловим только ручки, иначе верхний ползунок перекрывает нижний */
  -webkit-appearance: none; appearance: none;
}
.rng__in::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.rng__in::-moz-range-thumb {
  pointer-events: auto;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff; cursor: pointer;
}
.rng__in::-moz-range-track { background: none; }
.pager { flex-wrap: wrap; }
.pager__gap { align-self: center; color: var(--text-mute); padding: 0 2px; }

/* Нативные стрелки у полей-чисел рисуются белым квадратом поверх тёмного поля.
   Значение всё равно меняют ползунок и клавиатура, поэтому убираем их. */
.fld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.fld input[type="number"]::-webkit-outer-spin-button,
.fld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Строка сервиса на странице статуса: состояние, аптайм и шкала последних суток */
.status__row { display: block; padding: 16px 22px 14px; }
.status__line { display: flex; align-items: center; gap: 12px; }
.status__name { flex: 1; color: var(--text); font-size: 15px; }
.status__pct { color: #22c55e; font-size: 15px; font-variant-numeric: tabular-nums; }
.status__bars { display: flex; gap: 3px; margin: 12px 0 6px; height: 26px; }
.bar { flex: 1; border-radius: 2px; background: var(--surface-2); }
.bar--up { background: #22c55e; }
.bar--down { background: #f87171; }
.status__scale {
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--text-mute); font-size: 12px;
}

/* Вводный абзац на странице оплаты — по центру, как в макете */
.lead-text { text-align: center; }