/* v2raytun.living — приборный щиток.

   Дизайн-система целиком здесь. Правило одно: цвет на этом сайте означает
   состояние, а не настроение. Зелёный — норма, янтарь — внимание, кирпич —
   отказ; всё остальное серое. Структуру держат толстые рамки (2–4 px),
   теней почти нет, скруглений почти нет.

   Тёмная тема основная: сюда приходят ночью, когда «перестало работать».
   Светлая — та же панель при дневном свете: плотный светлый металл,
   те же рамки, те же три цвета. */

:root {
  --dsp: 'RussoOne', 'Arial Narrow', system-ui, sans-serif;
  --body: 'NotoSans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Cousine', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --bg: #0F151B;
  --bg2: #161F27;
  --bg3: #1E2932;
  --bg4: #26333D;
  --ink: #E8EEF4;
  --ink2: #9AAAB8;
  --ink3: #6F8091;
  --line: #2C3945;
  --edge: #41525F;

  --ok: #33D583;
  --okb: #15382A;
  --warn: #F5B01F;
  --warnb: #3A2C08;
  --fail: #FF6048;
  --failb: #3C1710;

  --r: 3px;
  --sh: 0 3px 0 rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #C5CED6;
    --bg2: #DFE6EB;
    --bg3: #EDF1F4;
    --bg4: #F7F9FA;
    --ink: #121A21;
    --ink2: #4B5A68;
    --ink3: #6B7B89;
    --line: #9FADB9;
    --edge: #75868F;

    --ok: #0B8A4B;
    --okb: #D3EFDF;
    --warn: #A96E05;
    --warnb: #F7E6C2;
    --fail: #C13520;
    --failb: #F7DBD5;

    --sh: 0 3px 0 rgba(30, 45, 58, .18);
  }
}

:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Подложка — миллиметровка приборного щита. Делается фоном самого body:
   отдельный слой с прозрачностью здесь не нужен и ломает захват экрана. */
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
  color: var(--ink);
  font: 400 17px/1.62 var(--body);
  font-feature-settings: "tnum" 1;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background-image:
      linear-gradient(rgba(22, 38, 52, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(22, 38, 52, .07) 1px, transparent 1px);
  }
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ok); }

.page { position: relative; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ok); color: #071109;
  padding: 10px 16px; z-index: 60; font: 400 14px/1 var(--dsp);
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ===== ШАПКА ============================================================== */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg2);
  border-bottom: 3px solid var(--edge);
}
.hdr__in {
  max-width: 1280px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand__logo { display: block; width: 40px; height: 40px; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__mark { font: 400 21px/1 var(--dsp); letter-spacing: .01em; }
.brand__sub {
  font: 400 10px/1 var(--mono); letter-spacing: .18em; color: var(--warn);
  margin-top: 5px;
}
.brand:hover { color: inherit; }

.hdr__nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.hdr__nav a {
  font: 400 13px/1 var(--body); text-decoration: none; color: var(--ink2);
  padding: 9px 10px; border: 2px solid transparent; border-radius: var(--r);
}
.hdr__nav a:hover { color: var(--ink); border-color: var(--line); }
.hdr__nav a[aria-current] { color: var(--ink); border-color: var(--warn); }

.hdr__act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.searchbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bg); color: var(--ink2);
  border: 2px solid var(--line); border-radius: var(--r);
  padding: 8px 11px; font: 400 13px/1 var(--body);
}
.searchbtn:hover { border-color: var(--edge); color: var(--ink); }
.searchbtn kbd {
  font: 400 11px/1 var(--mono); border: 1px solid var(--edge);
  padding: 2px 5px; border-radius: 2px; color: var(--ink3);
}

.burger {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg3); color: var(--ink);
  border: 2px solid var(--edge); border-radius: var(--r);
  padding: 9px 12px; font: 400 12px/1 var(--dsp); letter-spacing: .06em;
}
.burger__i { font-size: 16px; }

.mnav { display: none; border-top: 2px solid var(--line); background: var(--bg2); }
.mnav.is-on { display: block; }
.mnav ul { list-style: none; margin: 0; padding: 8px 16px 16px; display: grid; gap: 6px; }
.mnav a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 12px 14px; background: var(--bg3);
  border: 2px solid var(--line); border-radius: var(--r); font-size: 15px;
}
.mnav a i {
  font: 700 11px/1 var(--mono); color: var(--warn); letter-spacing: .08em;
  border: 2px solid var(--line); padding: 4px 6px; border-radius: 2px; font-style: normal;
}
.mnav a[aria-current] { border-color: var(--warn); }

/* ===== КНОПКИ ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; cursor: pointer; text-align: center;
  font: 400 15px/1 var(--dsp); letter-spacing: .02em;
  padding: 14px 22px; border-radius: var(--r);
  border: 3px solid var(--ok); background: var(--ok); color: #06140C;
  box-shadow: var(--sh);
}
.btn:hover { color: #06140C; filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn--sm { padding: 10px 14px; font-size: 13px; border-width: 2px; }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--edge); box-shadow: none;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink2); }
.btn__s { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn { color: #FFFFFF; }
  :root:not([data-theme="dark"]) .btn:hover { color: #FFFFFF; }
  :root:not([data-theme="dark"]) .btn--ghost { color: var(--ink); }
}

/* ===== ХЛЕБНЫЕ КРОШКИ И ШАПКА СТРАНИЦЫ ==================================== */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  padding: 18px 0 14px; font: 400 12px/1 var(--mono); color: var(--ink3);
}
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { color: var(--ok); }
.crumbs i { font-style: normal; color: var(--edge); }

.phead {
  border: 3px solid var(--edge); border-left-width: 10px; border-radius: var(--r);
  background: var(--bg2); padding: 24px 28px 26px; margin-bottom: 20px;
}
.phead--fail { border-left-color: var(--fail); }
.phead--warn { border-left-color: var(--warn); }
.phead--ok { border-left-color: var(--ok); }
.phead--info { border-left-color: var(--edge); }

.phead__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.phead__code {
  font: 700 13px/1 var(--mono); font-style: normal; letter-spacing: .08em;
  background: var(--bg4); border: 2px solid var(--edge); border-radius: 2px;
  padding: 5px 8px; color: var(--ink);
}
.phead__node, .phead__upd { font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); }
.phead__node { color: var(--ink2); }

.phead h1 {
  margin: 0; font: 400 clamp(28px, 4.4vw, 44px)/1.1 var(--dsp); letter-spacing: -.005em;
}
.phead__lead { margin: 16px 0 0; font-size: 19px; color: var(--ink); max-width: 76ch; }

/* ===== ПОЛОСА УЗЛОВ (signature в статье) ================================== */
.ns {
  border: 3px solid var(--line); border-radius: var(--r); background: var(--bg2);
  padding: 14px 16px; margin-bottom: 22px;
}
.ns__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.ns__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ns__i a {
  display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 4px 9px;
  text-decoration: none; padding: 11px 13px; background: var(--bg3);
  border: 2px solid var(--line); border-radius: var(--r); height: 100%;
}
.ns__led {
  grid-row: span 2; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--edge);
}
.ns__code { font: 700 13px/1 var(--mono); letter-spacing: .06em; color: var(--ink2); }
.ns__name { font: 400 14px/1 var(--dsp); color: var(--ink2); }
.ns__what { grid-column: 2 / -1; font-size: 12px; color: var(--ink3); line-height: 1.3; }
.ns__i.is-here .ns__code, .ns__i.is-here .ns__name { color: var(--ink); }
.ns__i a:hover { border-color: var(--edge); color: inherit; }

/* Цвет полосы — состояние страницы: отказ, внимание или «речь об этом узле». */
.ns--fail .ns__cap { color: var(--fail); }
.ns--fail .ns__i.is-here a { border-color: var(--fail); background: var(--failb); }
.ns--fail .ns__i.is-here .ns__led { background: var(--fail); border-color: var(--fail); }
.ns--warn .ns__cap { color: var(--warn); }
.ns--warn .ns__i.is-here a { border-color: var(--warn); background: var(--warnb); }
.ns--warn .ns__i.is-here .ns__led { background: var(--warn); border-color: var(--warn); }
.ns--ok .ns__cap { color: var(--ok); }
.ns--ok .ns__i.is-here a { border-color: var(--ok); background: var(--okb); }
.ns--ok .ns__i.is-here .ns__led { background: var(--ok); border-color: var(--ok); }

/* ===== СЕТКА ДОКУМЕНТА ==================================================== */
.doc {
  display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 28px;
  align-items: start; padding-bottom: 56px;
}

.art { min-width: 0; }
/* Мера строки — только для текста. Плашки, шаги и таблицы занимают всю
   ширину колонки: это приборные панели, а не абзацы. */
.art > p, .art > ul:not([class]), .art > ol.plain-ol, .art .lead { max-width: 74ch; }
.art h2 {
  margin: 44px 0 14px; font: 400 clamp(22px, 2.6vw, 29px)/1.2 var(--dsp);
  padding-left: 14px; border-left: 6px solid var(--warn);
}
.art h3 { margin: 30px 0 8px; font: 400 20px/1.3 var(--dsp); color: var(--ink); }
.art > p { margin: 0 0 16px; }
.art .lead { font-size: 19px; }
.art ul, .art ol { margin: 0 0 18px; padding-left: 0; }
.art ul:not([class]) { list-style: none; }
.art ul:not([class]) > li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.art ul:not([class]) > li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 9px; height: 9px; background: var(--warn); border-radius: 2px;
}
.art ol.plain-ol { padding-left: 26px; }
.art ol.plain-ol > li { margin-bottom: 9px; }
.art strong { font-weight: 700; }
.art code {
  font: 400 .88em/1.4 var(--mono); background: var(--bg3);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; word-break: break-word;
}
.art pre {
  font: 400 13px/1.55 var(--mono); background: var(--bg2); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; overflow: auto; margin: 0 0 20px;
}

/* ===== ЩИТОК (signature) ================================================== */
.sig {
  margin: 0 0 26px; border: 4px solid var(--edge); border-radius: var(--r);
  background: var(--bg2); box-shadow: var(--sh);
}
.sig__hd {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: var(--bg3); border-bottom: 3px solid var(--edge);
}
.sig__cap { font: 400 15px/1 var(--dsp); letter-spacing: .08em; }
.sig__tag { font: 400 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); }
.sig__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0; }
.sig__probes { padding: 14px 18px; border-right: 3px solid var(--line); }
.sig__out { padding: 14px 18px; display: flex; flex-direction: column; }
.sig__sub {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .14em;
  color: var(--ink3); margin-bottom: 12px;
}

.pr { border: 0; margin: 0 0 14px; padding: 0; }
.pr:last-child { margin-bottom: 0; }
.pr__lg { padding: 0; display: block; margin-bottom: 7px; }
.pr__lg b { display: block; font: 400 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--ink); }
.pr__lg i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); margin-top: 2px; }
.pr__opts { display: grid; gap: 5px; }
.pr__o {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px;
  cursor: pointer; padding: 8px 10px; background: var(--bg3);
  border: 2px solid var(--line); border-radius: var(--r);
}
.pr__o input { position: absolute; opacity: 0; width: 0; height: 0; }
.pr__c {
  font: 700 11px/1 var(--mono); letter-spacing: .05em; color: var(--ink3);
  border: 2px solid var(--edge); border-radius: 2px; padding: 4px 5px; min-width: 30px; text-align: center;
}
.pr__t { font-size: 13.5px; color: var(--ink2); }
.pr__o:hover { border-color: var(--edge); }
.pr__o:has(input:checked) { border-color: var(--warn); background: var(--warnb); }
.pr__o:has(input:checked) .pr__c { color: var(--warn); border-color: var(--warn); }
.pr__o:has(input:checked) .pr__t { color: var(--ink); font-weight: 700; }
.pr__o:has(input:focus-visible) { outline: 3px solid var(--warn); outline-offset: 2px; }

.lamps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.lamp {
  display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center; gap: 3px 12px;
  padding: 9px 14px; background: var(--bg3);
  border: 2px solid var(--line); border-radius: var(--r);
}
.lamp__led {
  grid-row: span 2; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: 4px solid var(--edge);
}
.lamp__code { font: 700 14px/1 var(--mono); letter-spacing: .05em; color: var(--ink2); }
.lamp__name { font: 400 16px/1 var(--dsp); color: var(--ink2); }
.lamp__what { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink3); line-height: 1.3; }
.lamp__st {
  grid-row: span 2; font: 700 11px/1 var(--mono); letter-spacing: .1em;
  color: var(--ink3); border: 2px solid var(--line); border-radius: 2px; padding: 5px 7px;
}
.lamp--ok { border-color: var(--ok); background: var(--okb); }
.lamp--ok .lamp__led { background: var(--ok); border-color: var(--ok); }
.lamp--ok .lamp__st { color: var(--ok); border-color: var(--ok); }
.lamp--warn { border-color: var(--warn); background: var(--warnb); }
.lamp--warn .lamp__led { background: var(--warn); border-color: var(--warn); }
.lamp--warn .lamp__st { color: var(--warn); border-color: var(--warn); }
.lamp--fail { border-color: var(--fail); background: var(--failb); }
.lamp--fail .lamp__led { background: var(--fail); border-color: var(--fail); }
.lamp--fail .lamp__st { color: var(--fail); border-color: var(--fail); }
.lamp--ok .lamp__code, .lamp--warn .lamp__code, .lamp--fail .lamp__code,
.lamp--ok .lamp__name, .lamp--warn .lamp__name, .lamp--fail .lamp__name { color: var(--ink); }

.vd {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  align-content: center; flex: 1 0 auto;
  padding: 14px 16px; border: 3px solid var(--edge); border-radius: var(--r);
  background: var(--bg4);
}
.vd--fail { border-color: var(--fail); }
.vd--warn { border-color: var(--warn); }
.vd--ok { border-color: var(--ok); }
.vd__code {
  align-self: start; font: 700 15px/1 var(--mono); letter-spacing: .06em;
  border: 3px solid currentColor; border-radius: 2px; padding: 7px 8px;
}
.vd--fail .vd__code { color: var(--fail); }
.vd--warn .vd__code { color: var(--warn); }
.vd--ok .vd__code { color: var(--ok); }
.vd__ttl { margin: 0 0 6px; font: 400 18px/1.25 var(--dsp); }
.vd__txt { margin: 0 0 10px; font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.vd__go { font: 400 14px/1 var(--dsp); color: var(--ok); text-decoration: none; }
.vd__go:hover { text-decoration: underline; }

.sig__foot {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-top: 3px solid var(--edge); background: var(--bg3);
}
.sig__price { display: flex; flex-direction: column; gap: 3px; }
.sig__price b { font: 400 20px/1 var(--dsp); color: var(--ok); }
.sig__price i { font-style: normal; font-size: 13px; color: var(--ink2); }

/* ===== ПЛАШКИ-ИНДИКАТОРЫ ================================================= */
.cards { margin: 0 0 26px; }
.cards__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.cards__row {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.cd { display: flex; }
.cd__a {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  padding: 16px 18px; text-decoration: none;
  background: var(--bg2); border: 3px solid var(--line); border-radius: var(--r);
  border-top-width: 8px;
}
.cd--ok .cd__a { border-top-color: var(--ok); }
.cd--warn .cd__a { border-top-color: var(--warn); }
.cd--fail .cd__a { border-top-color: var(--fail); }
.cd__a:hover { color: inherit; border-color: var(--edge); background: var(--bg3); }
.cd--ok .cd__a:hover { border-top-color: var(--ok); }
.cd--warn .cd__a:hover { border-top-color: var(--warn); }
.cd--fail .cd__a:hover { border-top-color: var(--fail); }
.cd__hd { display: flex; align-items: center; gap: 9px; }
.cd__led { width: 13px; height: 13px; border-radius: 50%; background: var(--edge); }
.cd--ok .cd__led { background: var(--ok); }
.cd--warn .cd__led { background: var(--warn); }
.cd--fail .cd__led { background: var(--fail); }
.cd__code { font: 700 13px/1 var(--mono); letter-spacing: .06em; color: var(--ink2); }
.cd__st { margin-left: auto; font: 700 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); }
.cd--ok .cd__st { color: var(--ok); }
.cd--warn .cd__st { color: var(--warn); }
.cd--fail .cd__st { color: var(--fail); }
.cd__ttl { font: 400 19px/1.22 var(--dsp); }
.cd__txt { font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.cd__often { font: 400 11.5px/1.3 var(--mono); color: var(--ink3); letter-spacing: .04em; }
.cd__go { margin-top: auto; font: 400 14px/1 var(--dsp); color: var(--ok); padding-top: 4px; }

/* ===== ПРИЗНАКИ ========================================================== */
.signs {
  margin: 0 0 26px; border: 3px solid var(--line); border-radius: var(--r);
  background: var(--bg2); overflow: hidden;
}
.signs__cap {
  display: block; padding: 11px 16px; background: var(--bg3);
  border-bottom: 3px solid var(--line);
  font: 400 11px/1 var(--mono); letter-spacing: .16em; color: var(--ink2);
}
.signs__list { list-style: none; margin: 0; padding: 0; }
.signs__i {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 4px 18px;
  padding: 13px 16px; border-bottom: 2px solid var(--line); border-left: 7px solid var(--edge);
}
.signs__i:last-child { border-bottom: 0; }
.signs__i--ok { border-left-color: var(--ok); }
.signs__i--warn { border-left-color: var(--warn); }
.signs__i--fail { border-left-color: var(--fail); }
.signs__s { font-weight: 700; font-size: 15px; }
.signs__v { font-size: 14.5px; color: var(--ink2); }

/* ===== ШКАЛА ЗАДЕРЖКИ ==================================================== */
.gauge { margin: 0 0 26px; }
.gauge__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.gauge__row {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.gu {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  background: var(--bg2); border: 3px solid var(--line); border-radius: var(--r);
  border-bottom-width: 9px;
}
.gu--ok { border-bottom-color: var(--ok); }
.gu--warn { border-bottom-color: var(--warn); }
.gu--fail { border-bottom-color: var(--fail); }
.gu__v { font: 700 26px/1 var(--mono); letter-spacing: -.02em; }
.gu__v i { font: 400 13px/1 var(--mono); font-style: normal; color: var(--ink3); margin-left: 5px; }
.gu__st { font: 700 11px/1 var(--mono); letter-spacing: .12em; }
.gu--ok .gu__st { color: var(--ok); }
.gu--warn .gu__st { color: var(--warn); }
.gu--fail .gu__st { color: var(--fail); }
.gu__t { font-size: 13.5px; color: var(--ink2); line-height: 1.45; }

/* ===== ШАГИ ============================================================== */
.steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.steps__i {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 16px 18px; background: var(--bg2);
  border: 2px solid var(--line); border-left: 7px solid var(--edge); border-radius: var(--r);
}
.steps__n {
  font: 700 17px/1 var(--mono); color: var(--warn);
  border: 3px solid var(--line); border-radius: 2px; padding: 8px 9px; align-self: start;
}
.steps__ttl { display: block; font: 400 19px/1.25 var(--dsp); margin-bottom: 4px; }
.steps__often {
  display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: .1em;
  color: var(--ink3); border: 2px solid var(--line); border-radius: 2px;
  padding: 4px 6px; margin-bottom: 9px;
}
.steps__b p { margin: 0 0 10px; }
.steps__b p:last-child { margin-bottom: 0; }
.steps__b ul { margin: 6px 0 10px; }

/* ===== ТАБЛИЦЫ =========================================================== */
.tw { margin: 0 0 26px; border: 3px solid var(--line); border-radius: var(--r); background: var(--bg2); overflow-x: auto; }
.tw__cap {
  display: block; padding: 11px 16px; background: var(--bg3);
  border-bottom: 3px solid var(--line);
  font: 400 11px/1 var(--mono); letter-spacing: .16em; color: var(--ink2);
}
.tw table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tw th, .tw td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--line); }
.tw thead th {
  font: 400 11px/1.2 var(--mono); letter-spacing: .1em; color: var(--ink3);
  background: var(--bg3); text-transform: uppercase;
}
.tw tbody tr:last-child th, .tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody th { font-weight: 700; }
.tw tbody th i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); font-weight: 400; }
.tw tr.is-best { background: var(--okb); }
.tw tr.is-best b { color: var(--ok); }

/* ===== ВРЕЗКИ ============================================================ */
.note {
  margin: 0 0 26px; padding: 16px 18px; border-radius: var(--r);
  background: var(--bg2); border: 2px solid var(--line); border-left: 8px solid var(--edge);
}
.note--ok { border-left-color: var(--ok); }
.note--warn { border-left-color: var(--warn); }
.note--fail { border-left-color: var(--fail); }
.note__ttl {
  display: block; font: 400 15px/1.3 var(--dsp); letter-spacing: .03em; margin-bottom: 7px;
}
.note__b p { margin: 0 0 9px; font-size: 15px; }
.note__b p:last-child { margin-bottom: 0; }
.note__b ul { margin: 6px 0 0; }

/* ===== ВОПРОСЫ =========================================================== */
.faq { margin: 0 0 26px; display: grid; gap: 8px; }
.faq__i { background: var(--bg2); border: 2px solid var(--line); border-radius: var(--r); }
.faq__i[open] { border-color: var(--edge); }
.faq__i summary {
  cursor: pointer; padding: 14px 16px; font: 400 17px/1.32 var(--dsp); list-style: none;
  display: flex; gap: 12px; align-items: baseline;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::before {
  content: '+'; font: 700 18px/1 var(--mono); color: var(--warn); flex: 0 0 auto;
}
.faq__i[open] summary::before { content: '−'; }
.faq__a { padding: 0 16px 14px 43px; }
.faq__a p { margin: 0 0 10px; font-size: 15px; color: var(--ink2); }
.faq__a p:last-child { margin-bottom: 0; }

/* ===== КОНТРОЛЬНАЯ ПРОВЕРКА И ПЕРЕХОДЫ =================================== */
.probe {
  margin: 0 0 26px; padding: 20px 22px; border-radius: var(--r);
  background: var(--bg2); border: 3px solid var(--warn); box-shadow: var(--sh);
}
.probe__tag {
  display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: .12em;
  color: var(--warn); border: 2px solid var(--warn); border-radius: 2px;
  padding: 5px 7px; margin-bottom: 12px;
}
.probe__ttl { margin: 0 0 8px; font: 400 22px/1.22 var(--dsp); }
.probe__txt { margin: 0 0 12px; font-size: 15.5px; color: var(--ink2); max-width: 70ch; }
.probe__pts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.probe__pts li {
  font: 400 12px/1 var(--mono); color: var(--ink2);
  border: 2px solid var(--line); border-radius: 2px; padding: 6px 9px;
}

.cta {
  margin: 0 0 26px; padding: 20px 22px; border-radius: var(--r);
  background: var(--bg2); border: 3px solid var(--ok); box-shadow: var(--sh);
}
.cta--diag { border-color: var(--warn); }
.cta__tag {
  display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: .12em;
  color: var(--ok); border: 2px solid var(--ok); border-radius: 2px;
  padding: 5px 7px; margin-bottom: 12px;
}
.cta--diag .cta__tag { color: var(--warn); border-color: var(--warn); }
.cta__ttl { margin: 0 0 8px; font: 400 23px/1.2 var(--dsp); }
.cta__txt { margin: 0 0 12px; font-size: 15.5px; color: var(--ink2); max-width: 70ch; }
.cta__pts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cta__pts li {
  font: 400 12px/1 var(--mono); color: var(--ink2);
  border: 2px solid var(--line); border-radius: 2px; padding: 6px 9px;
}
.cta__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.spark {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r);
  background: var(--bg3); border: 2px solid var(--line); border-left: 7px solid var(--ok);
}
.spark__tag {
  font: 700 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--ok);
  border: 2px solid var(--ok); border-radius: 2px; padding: 5px 7px;
}
.spark__txt { margin: 0; flex: 1 1 240px; font-size: 14.5px; color: var(--ink2); }
.spark__txt strong { color: var(--ink); }

.foot-go {
  margin: 36px 0 0; padding: 22px 24px; border-radius: var(--r);
  background: var(--bg2); border: 3px solid var(--ok); border-top-width: 9px; box-shadow: var(--sh);
}
.foot-go__tag {
  display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: .12em;
  color: var(--ok); border: 2px solid var(--ok); border-radius: 2px; padding: 5px 7px; margin-bottom: 12px;
}
.foot-go__ttl { margin: 0 0 8px; font: 400 24px/1.2 var(--dsp); }
.foot-go__txt { margin: 0 0 16px; font-size: 15.5px; color: var(--ink2); max-width: 72ch; }

/* ===== ПРАЙС И СОСТАВ ==================================================== */
.ptab { margin: 0 0 26px; }
.ptab__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.ptab .tw { margin-bottom: 12px; }
.ptab__note { margin: 0 0 14px; font-size: 14px; color: var(--ink3); max-width: 70ch; }

.inc { margin: 0 0 26px; }
.inc__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.inc__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.inc__list li {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 15px;
  background: var(--bg2); border: 2px solid var(--line); border-left: 6px solid var(--ok);
  border-radius: var(--r);
}
.inc__list b { font-size: 15px; }
.inc__list span { font-size: 13.5px; color: var(--ink2); }

/* ===== КАССА ============================================================= */
.chk {
  margin: 0 0 28px; border: 4px solid var(--ok); border-radius: var(--r);
  background: var(--bg2); box-shadow: var(--sh);
}
.chk__hd {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 13px 18px; background: var(--bg3); border-bottom: 3px solid var(--ok);
}
.chk__cap { font: 400 16px/1 var(--dsp); letter-spacing: .06em; }
.chk__tag { font: 700 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--ok); }
.chk__box { padding: 14px; min-height: 120px; }
.chk__box iframe { display: block; width: 100%; border: 0; }
.chk__fb { margin: 0; font-size: 14.5px; color: var(--ink2); }

.paypage__pts {
  list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.paypage__pts li {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 15px;
  background: var(--bg2); border: 2px solid var(--line); border-top: 6px solid var(--warn);
  border-radius: var(--r);
}
.paypage__pts b { font-size: 15px; }
.paypage__pts span { font-size: 13.5px; color: var(--ink2); }
.paypage__back {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin: 30px 0 0; padding: 16px 18px; background: var(--bg2);
  border: 3px solid var(--line); border-radius: var(--r);
}
.paypage__back p { margin: 0; font-size: 15px; color: var(--ink2); }

/* ===== ПРАВАЯ РЕЙКА ====================================================== */
.rail { position: sticky; top: 84px; display: grid; gap: 12px; }
.rail__cap {
  display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 9px;
}
.rail__now {
  padding: 14px 16px; background: var(--bg2); border: 3px solid var(--line);
  border-left: 8px solid var(--edge); border-radius: var(--r);
}
.rail__now--fail { border-left-color: var(--fail); }
.rail__now--warn { border-left-color: var(--warn); }
.rail__now--ok { border-left-color: var(--ok); }
.rail__node { display: flex; align-items: baseline; gap: 9px; font: 400 18px/1 var(--dsp); }
.rail__node i { font: 700 13px/1 var(--mono); font-style: normal; color: var(--warn); }
.rail__what { display: block; margin-top: 6px; font-size: 13px; color: var(--ink3); }
.rail__code {
  display: inline-block; margin-top: 10px; font: 700 11px/1 var(--mono); letter-spacing: .08em;
  color: var(--ink2); border: 2px solid var(--line); border-radius: 2px; padding: 5px 7px;
}
.rail__grp { padding: 14px 16px; background: var(--bg2); border: 3px solid var(--line); border-radius: var(--r); }
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail__list a {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center;
  padding: 8px 9px; text-decoration: none; border: 2px solid transparent; border-radius: 2px;
  font-size: 14px; color: var(--ink2);
}
.rail__list a:hover { background: var(--bg3); border-color: var(--line); color: var(--ink); }
.rail__list i {
  font: 700 10.5px/1 var(--mono); font-style: normal; color: var(--ink3);
  border: 2px solid var(--line); border-radius: 2px; padding: 4px 3px; text-align: center;
}
.rail__cta {
  padding: 16px; background: var(--bg2); border: 3px solid var(--warn); border-radius: var(--r);
}
.rail__cta-tag {
  display: inline-block; font: 700 10px/1 var(--mono); letter-spacing: .12em; color: var(--warn);
  border: 2px solid var(--warn); border-radius: 2px; padding: 5px 6px; margin-bottom: 10px;
}
.rail__cta-ttl { margin: 0 0 7px; font: 400 17px/1.24 var(--dsp); }
.rail__cta-txt { margin: 0 0 13px; font-size: 13.5px; color: var(--ink2); }
.rail__cta .btn { width: 100%; font-size: 14px; padding: 12px 14px; }

/* ===== ХВОСТ СТАТЬИ ====================================================== */
.also { margin: 26px 0 0; }
.also__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.also__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.also__list li { position: relative; }
.also__list a {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 13px 15px; text-decoration: none; background: var(--bg2);
  border: 2px solid var(--line); border-radius: var(--r);
}
.also__list a:hover { color: inherit; border-color: var(--edge); background: var(--bg3); }
.also__t { font: 400 16px/1.25 var(--dsp); }
.also__s { font-size: 13px; color: var(--ink3); }
.also__c {
  position: absolute; top: 10px; right: 12px; font: 700 10px/1 var(--mono);
  font-style: normal; color: var(--ink3); letter-spacing: .08em;
}

.helpful {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 24px 0 0; padding: 14px 16px; background: var(--bg2);
  border: 2px dashed var(--edge); border-radius: var(--r);
}
.helpful__q { font: 400 15px/1 var(--dsp); letter-spacing: .03em; }
.helpful__thanks { font-size: 14px; color: var(--ok); }
.helpful__btns { display: flex; gap: 8px; margin-left: auto; }
.helpful button {
  cursor: pointer; background: var(--bg3); color: var(--ink2);
  border: 2px solid var(--line); border-radius: 2px; padding: 8px 16px;
  font: 700 12px/1 var(--mono); letter-spacing: .1em;
}
.helpful button:hover { border-color: var(--edge); color: var(--ink); }
.helpful[data-done] button { opacity: .45; pointer-events: none; }

/* ===== ПОДВАЛ ============================================================ */
.ftr { border-top: 4px solid var(--edge); background: var(--bg2); }
.ftr__in { max-width: 1280px; margin: 0 auto; padding: 32px 24px 24px; }
.ftr__grid {
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 22px; border-bottom: 2px solid var(--line);
}
.ftr__ttl {
  display: block; font: 400 12px/1 var(--mono); letter-spacing: .14em;
  color: var(--ink3); margin-bottom: 11px;
}
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ftr__col a { font-size: 14px; color: var(--ink2); text-decoration: none; }
.ftr__col a:hover { color: var(--ok); }
.ftr__nodes a { display: flex; gap: 9px; align-items: baseline; }
.ftr__nodes i { font: 700 11px/1 var(--mono); font-style: normal; color: var(--warn); }
.ftr__disc { margin: 20px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink3); max-width: 100ch; }
.ftr__bar {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding-top: 16px; border-top: 2px solid var(--line);
  font: 400 11px/1 var(--mono); letter-spacing: .08em;
}
.ftr__bar a { color: var(--ink2); text-decoration: none; }
.ftr__bar a:hover { color: var(--ok); }
.ftr__cp { margin-left: auto; color: var(--ink3); }

/* ===== ПОИСК ============================================================= */
.sdlg { display: none; position: fixed; inset: 0; z-index: 70; }
.sdlg.is-on { display: block; }
.sdlg__bd { position: absolute; inset: 0; background: rgba(4, 8, 12, .72); }
.sdlg__box {
  position: relative; max-width: 680px; margin: 8vh auto 0;
  background: var(--bg2); border: 4px solid var(--edge); border-radius: var(--r);
}
.sdlg input {
  width: 100%; padding: 16px 18px; font: 400 17px/1.3 var(--body);
  background: var(--bg3); color: var(--ink);
  border: 0; border-bottom: 3px solid var(--edge); border-radius: 0;
}
.sdlg input:focus { outline: none; border-bottom-color: var(--warn); }
.sres { list-style: none; margin: 0; padding: 8px; max-height: 58vh; overflow: auto; display: grid; gap: 4px; }
.sres a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px; text-decoration: none; border: 2px solid transparent; border-radius: 2px;
}
.sres a.is-sel, .sres a:hover { background: var(--bg3); border-color: var(--warn); color: inherit; }
.sres__step {
  font: 700 10.5px/1 var(--mono); font-style: normal; color: var(--warn);
  border: 2px solid var(--line); border-radius: 2px; padding: 4px 5px;
}
.sres__t { font-size: 15px; }
.sres__t mark { background: var(--warnb); color: var(--warn); }
.sres__p { font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); }
.sres__none { color: var(--ink2); }
.sdlg__foot {
  padding: 10px 14px; border-top: 2px solid var(--line);
  font: 400 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--ink3);
}

/* ===== ПОЛЕ ПОИСКА НА ГЛАВНОЙ ============================================ */
.finder {
  margin: 0 0 26px; padding: 16px 18px; background: var(--bg2);
  border: 3px solid var(--line); border-radius: var(--r);
}
.finder__cap {
  display: block; font: 400 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 10px;
}
.finder input {
  width: 100%; padding: 13px 15px; font: 400 16px/1.3 var(--body);
  background: var(--bg3); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r);
}
.finder input:focus { outline: none; border-color: var(--warn); }
.finder__tries { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.finder__tries button {
  cursor: pointer; background: var(--bg3); color: var(--ink2);
  border: 2px solid var(--line); border-radius: 2px; padding: 6px 9px;
  font: 400 12px/1 var(--mono);
}
.finder__tries button:hover { border-color: var(--warn); color: var(--ink); }
.fres { margin-top: 12px; }
.fres__cap { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); margin-bottom: 8px; }
.fres__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fres__list a {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  text-decoration: none; background: var(--bg3);
  border: 2px solid var(--line); border-radius: 2px;
}
.fres__list a:hover { border-color: var(--warn); color: inherit; }
.fres__grp { font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); }
.fres__t { font-size: 15px; }
.fres__t mark { background: var(--warnb); color: var(--warn); }
.fres__none-t { margin: 0 0 6px; font-size: 15px; }
.fres__none-s { margin: 0; font-size: 13.5px; color: var(--ink2); }

/* ===== НИЖНЯЯ ПАНЕЛЬ (телефон) =========================================== */
.gobar { display: none; }
.gobar.is-on { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
.gobar__in {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg2); border-top: 3px solid var(--ok);
}
.gobar__txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gobar__txt b { font: 400 15px/1 var(--dsp); color: var(--ok); }
.gobar__txt span { font-size: 11.5px; color: var(--ink3); }
.gobar__x {
  cursor: pointer; background: transparent; color: var(--ink3);
  border: 2px solid var(--line); border-radius: 2px; width: 32px; height: 32px; font-size: 16px;
}
body.has-gobar { padding-bottom: 64px; }

/* ===== ГЛАВНАЯ =========================================================== */
.hero { padding: 16px 0 6px; }
.hero__tag {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font: 700 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--warn);
  border: 2px solid var(--warn); border-radius: 2px; padding: 6px 8px;
}
.hero h1 { margin: 0 0 12px; font: 400 clamp(29px, 4.6vw, 47px)/1.06 var(--dsp); letter-spacing: -.01em; }
.hero__lead { margin: 0 0 18px; font-size: 18px; color: var(--ink2); max-width: 86ch; }
.hero__lead strong { color: var(--ink); }
/* Главная идёт в одну широкую колонку: плашки и таблицы занимают всю ширину
   щита, а абзацы держат свою меру за счёт max-width внутри .art. */
.home { padding-bottom: 56px; }
.home__cols { display: block; }

/* ===== АДАПТИВ =========================================================== */
@media (max-width: 1080px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
  .sig__grid { grid-template-columns: minmax(0, 1fr); }
  .sig__probes { border-right: 0; border-bottom: 3px solid var(--line); }
}

@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .burger { display: inline-flex; margin-left: auto; }
  .hdr__in { gap: 12px; padding: 10px 16px; }
  .searchbtn__t, .searchbtn kbd { display: none; }
  .btn__l { display: none; }
  .btn__s { display: inline; }
  .wrap { padding: 0 16px; }
  .ftr__in { padding: 28px 16px 20px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding: 12px 0 4px; }
  .hero__lead { font-size: 16.5px; margin-bottom: 14px; }
  .phead { padding: 18px 16px 20px; border-left-width: 8px; }
  .phead__lead { font-size: 17px; }
  .ns__row { grid-template-columns: minmax(0, 1fr); }
  .signs__i { grid-template-columns: minmax(0, 1fr); }
  .steps__i { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .steps__n { justify-self: start; }
  .lamp { grid-template-columns: 22px auto 1fr; }
  .lamp__st { grid-row: auto; grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .lamp__what { grid-column: 2 / -1; }
  .sig__hd, .chk__hd { padding: 11px 14px; }
  .sig__probes, .sig__out { padding: 14px; }
  .cta, .probe, .foot-go { padding: 16px 16px; }
  .cta__ttl, .probe__ttl { font-size: 20px; }
  .foot-go__ttl { font-size: 21px; }
  .tw table { font-size: 13.5px; }
  .tw th, .tw td { padding: 9px 11px; }
  .gu__v { font-size: 22px; }
  .helpful__btns { margin-left: 0; }
  .ftr__cp { margin-left: 0; width: 100%; }
}

/* Телефон: в шапке остаётся только знак, значок меню, поиск и короткая
   кнопка доступа — иначе строка не помещается в 375 px. */
@media (max-width: 580px) {
  .burger__t { display: none; }
  .burger { padding: 9px 11px; gap: 0; }
  .hdr__in { gap: 10px; }
  .brand { gap: 9px; }
  .brand__mark { font-size: 18px; }
  .brand__sub { font-size: 9px; letter-spacing: .14em; }
  .brand__logo { width: 34px; height: 34px; }
  .hdr__act { gap: 8px; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 12px; }
  .phead h1 { font-size: 25px; }
  .hero h1 { font-size: 26px; }
  .pr__o { grid-template-columns: auto 1fr; padding: 7px 8px; }
  .hdr__in { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}