/* Стили, которые относятся только к одному экрану. Экраны модуля добавляются с модуля 3. */

/* ===== Витрина компонентов kit.html (вне продукта) ===== */
.kit{display:grid;gap:var(--s-16)}
.kit-row{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap}
.kit-col{display:grid;gap:var(--s-12);align-content:start}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--s-16)}
.kit-cap{font:600 14px/20px var(--font);color:var(--c-gray-600)}
.kit-page{max-width:1280px;margin:0 auto;--ml:var(--mr)}
.kit-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}

/* ===== Главная Modbus (модуль 3): карточка «Подключения», дерево, заставка ===== */
.mbc-bar{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;min-width:0} /* вкладки (если есть) — первыми слева, сразу за ними поиск; без вкладок поиск первый */
.mbc-bar-sb{justify-content:space-between} /* без поиска: выбор слева, фильтр справа */
.mbc-q{flex:0 1 280px;min-width:200px}
.mbt .c-x{width:44px;padding-right:0}
.mbt .c-xr{display:none} /* раскрытие справа — только телефон */
.mbt .c-u{text-align:right}
.mbt .tbl td.c-u,.mbt .tbl td.c-p{font-variant-numeric:tabular-nums}
.mbt-chev svg.i{transform:rotate(-90deg);transition:transform .15s}
.mbt-chev[aria-expanded=true]{border-color:transparent;background:transparent;color:var(--c-gray-400)}
.mbt-chev[aria-expanded=true] svg.i{transform:none}
.mbt tbody tr{cursor:pointer}
.mbt-d .c-n{padding-left:var(--s-32)} /* на телефоне 16: левой колонки раскрытия нет */
.mbt-meta{display:none}
.mbt-new td{animation:mbt-new 2.4s ease-out forwards}
.mbt-new td:first-child{border-left:3px solid var(--c-primary-400);animation-name:mbt-new,mbt-edge}
@keyframes mbt-new{0%,83%{background:var(--c-primary-50)}100%{background:var(--c-white)}}
@keyframes mbt-edge{0%,83%{border-left-color:var(--c-primary-400)}100%{border-left-color:transparent}}
.mbs{gap:var(--gut)}
.mbs-f{width:180px;height:36px;border-radius:var(--r-8)}
.mbs-k{flex-direction:column;justify-content:center;gap:var(--s-12)}
.mbs-k .sk:first-child{width:60%}
.mbs-k .sk:last-child{width:30%;height:28px}
.mbs-t{width:20%;height:24px}
.mbt-ln{display:inline-flex;align-items:center;gap:var(--s-8);white-space:nowrap}
.mbt-lc{white-space:nowrap;font:500 14px/20px var(--font);color:var(--c-gray-600)}
@media (max-width:1760px){.mbt .c-t{display:none}}
@media (max-width:1440px){.mbt :is(.c-a,.c-md){display:none}}
@media (max-width:1180px){.mbt :is(.c-pr,.c-er){display:none}} /* на узком экране протокол и ошибку убираем из колонок; на телефоне они в строке под названием */
/* Телефон: дерево — «список внутри одной белой карточки» (Figma «По областям» 4661:99530): карточка .mbc уже белая (r 12, padding 12),
   строка — разделитель снизу 1 Серый/100, padding 12/0, gap 8. Строка устроена как Report item 4055:79145: название SemiBold 14 + ⋮ + раскрытие,
   ниже бейдж статуса Md outline 24 и пары «подпись Regular 14 Серый/300 — значение Medium 14» через 4. Устройства — с отступом 16 под подключением.
   Поиск и сортировка — Input Md 36 во всю ширину; блоки карточки через 12 */
@media (max-width:767px){
  .mbc{gap:var(--s-12)}
  .mbc-q{flex:1 1 100%;min-width:0}
  .mbt-sort .sel{flex:1 1 auto}
  .mbt-sort .sel .inp{width:100%}
  .mbt.twrap{overflow:visible;border:0;border-radius:0;background:none}
  .mbt .tbl,.mbt tbody{display:block}
  .mbt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mbt tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s-8) var(--s-4);padding:var(--s-12) 0;border-bottom:1px solid var(--c-gray-100)}
  .mbt tbody tr:last-child{border-bottom:0}
  .mbt .tbl tbody td{display:block;height:auto;padding:0;border:0;white-space:normal;background:none;animation:none}
  .mbt .tbl tbody td.c-n{display:contents} /* название и мета — прямо в сетке строки: мета во всю ширину под названием */
  .mbt .tbl tbody td:is(.c-x,.c-cd,.c-pr,.c-md,.c-a,.c-st,.c-l,.c-s,.c-u,.c-t,.c-p,.c-er,.c-cr){display:none}
  .mbt .rowb{grid-column:1;grid-row:1;justify-self:start;font-weight:600}
  .mbt .tbl tbody td.t-act{position:static;grid-column:2;grid-row:1;width:auto}
  .mbt .tbl tbody td.c-xr{grid-column:3;grid-row:1;width:28px} /* у устройства пустая — ⋮ стоит ровно под ⋮ подключения */
  .mbt-d{padding-left:var(--s-16)}
  .mbt tbody tr.mbt-new{animation:mbt-new 2.4s ease-out forwards}
  .mbt-meta{grid-column:1/-1;grid-row:2;display:grid;gap:var(--s-4)}
  .mbt-meta>:first-child{justify-self:start;margin-bottom:var(--s-4)} /* бейдж статуса — строка 24, от строк данных через 8 */
  .mbt-ln{flex-wrap:wrap;white-space:normal}
  .mbt-lc{white-space:normal}
  .mbt-kv{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-12)}
  .mbt-k{flex:none;font:400 14px/20px var(--font);color:var(--c-gray-500)}
  .mbt-v{min-width:0;text-align:right;font:500 14px/20px var(--font);color:var(--c-primary-500)}
}
@media (prefers-reduced-motion:reduce){.mbt-new,.mbt-new td,.mbt-chev svg.i{animation-duration:0s;transition:none}}

/* ===== Подключение (модуль 4): шапка, «Обзор», «Диагностика», окно «Изменить подключение» ===== */
/* шапка: список «подпись — значение» (.kv). Компьютер — строка значений через «·»: подписи «Режим» и «Связь» видны, у адреса и станции скрыты;
   телефон — белая карточка со строками «подпись — значение» (Figma 5201:150139), значение справа */
@media (min-width:768px){
  .cn-spec.kv{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-8) var(--s-12);margin-top:calc(-1 * var(--s-8));font:500 14px/20px var(--font);color:var(--c-gray-600)}
  .cn-spec .kv-r{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s-8)}
  .cn-spec .kv-r+.kv-r::before{content:"·";margin-right:var(--s-4);color:var(--c-gray-400)}
  .cn-spec dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);max-width:none}
  .cn-spec .cn-spec-l dt{position:static;width:auto;height:auto;overflow:visible;clip:auto;font:inherit;color:var(--c-gray-500)}
  .cn-spec .cn-spec-l dt::after{content:":"}
  .cn-spec dd{display:inline-flex;align-items:center;flex:none;flex-wrap:wrap;gap:var(--s-8);text-align:left;font:inherit;color:inherit}
}
@media (max-width:767px){
  .cn-spec.kv{gap:var(--s-8);padding:var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-12);background:var(--c-white)}
  .cn-spec .kv-r{flex-direction:row;align-items:center;gap:var(--s-12)}
  .cn-spec dd{display:flex;align-items:center;justify-content:flex-end;flex:1 1 0;flex-wrap:wrap;gap:var(--s-4) var(--s-8);width:auto;text-align:right}
}
.cn-tabs{display:flex}
.cn-body{display:grid;gap:var(--gut);min-width:0}
.cn-none{font:400 14px/20px var(--font);color:var(--c-gray-600)}
.cn-h3{font:700 14px/20px var(--font);color:var(--c-primary-500)}
/* «Обзор» */
@media (max-width:767px){ /* таблица устройств на телефоне: подпись над значением, значение в одну строку */
  .tcards .tbl td.cn-kind[data-l]:not(:first-child){text-align:left}
  .tcards td.cn-kind[data-l]::before{display:block;float:none;margin-right:0}
}
.cn-ov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:start}
/* плитки счётчиков — текстовая часть «Карточки» (Figma 1190:14685) без иконки: отступы 12, радиус 12, рамка Основной/100;
   строки без зазора: подпись 14 Полужирный Серый/500, число «Заголовок 3» 20/28 Жирный, примечание 14 Полужирный Серый/500;
   единица по базовой линии */
/* плитки счётчиков — общий kpi (ui/kpi.js); здесь только число колонок: четыре, три или две в ряд, на телефоне одна */
/* «Состояние связи» */
.cn-chain .cn-todo{white-space:normal;min-width:240px}
.cn-badrow td:first-child{border-left:3px solid var(--c-red-500)}
.cn-hl td{animation:cn-hl 2s ease-out forwards}
@keyframes cn-hl{0%,80%{background:var(--c-primary-50)}100%{background:var(--c-white)}}
.cn-run{display:inline-flex;align-items:center;gap:var(--s-8);font:500 14px/20px var(--font);color:var(--c-gray-600)}
/* «Сбои связи» */
.cn-fails{list-style:none;margin:0;padding:0;display:grid}
.cn-fails li{display:grid;grid-template-columns:auto minmax(140px,auto) minmax(72px,auto) minmax(0,1fr);align-items:center;gap:var(--s-12);padding:var(--s-8) 0;border-bottom:1px solid var(--c-gray-100);font:500 14px/20px var(--font);color:var(--c-primary-500)}
.cn-fails li:last-child{border-bottom:0}
.cn-f-d,.cn-f-w{color:var(--c-gray-600)}
/* «Ошибки опроса»: столбики без перерисовки по ширине */
/* «Тест связи» (бывшее «Чтение регистра») */
.cn-rr-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);width:100%;padding:0;border:0;background:none;text-align:left;color:var(--c-primary-500)}
.cn-rr-h>span{display:grid}
.cn-rr-h>svg.i{color:var(--c-gray-500);transition:transform .15s}
.cn-rr-h[aria-expanded=true]>svg.i{transform:rotate(180deg)}
.cn-rr-fmt{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.cn-rr-fmt .segl-l{display:inline-flex;align-items:center;gap:var(--s-4)}
.cn-rr-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-12);align-items:start}
.cn-rr-a{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap}
.cn-rr-l{font:500 14px/20px var(--font);color:var(--c-gray-600);overflow-wrap:anywhere}
.cn-rr-t{max-width:420px}
/* окно «Изменить подключение» */
.cn-form{display:grid;gap:var(--s-16)}
.frm-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);align-items:start}
@media (max-width:480px){.frm-2{grid-template-columns:minmax(0,1fr)}}
.cn-ip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,120px);align-items:start;gap:var(--s-8)}
.cn-ip-c{padding-top:34px;font:600 14px/20px var(--font);color:var(--c-gray-600)}
.cn-more{border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.cn-more-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);width:100%;padding:var(--s-12);border:0;border-radius:var(--r-8);background:none;text-align:left;font:700 14px/20px var(--font);color:var(--c-primary-500)}
.cn-more-h>span{display:grid}
.cn-more-h>svg.i{color:var(--c-gray-500);transition:transform .15s}
.cn-more-h[aria-expanded=true]>svg.i{transform:rotate(180deg)}
.cn-more-b{display:grid;gap:var(--s-16);padding:0 var(--s-12) var(--s-12)}
.cn-diff{margin:0;padding-left:var(--s-20);display:grid;gap:var(--s-2);text-align:left;font:500 14px/20px var(--font);color:var(--c-primary-500)}
/* «Расписание опроса», «Запуски опроса» */
/* поля расписания на всю ширину блока: три в ряд, узкий блок — две (не уже 150), телефон — одна; переключатель — отдельной строкой */
.sc-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-16);align-items:start}
.sc-f>.cbl{grid-column:1/-1}
@media (max-width:767px){.sc-f{grid-template-columns:minmax(0,1fr)}}
.sc-a{display:flex;gap:var(--s-8);flex-wrap:wrap}
.rn-n{font-variant-numeric:tabular-nums;white-space:nowrap}
/* HTTPS push: окно «Ключ создан» */
.pk-r{display:grid;gap:var(--s-4)}
.pk-v{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);padding:var(--s-8) var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.pk-v .mono{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:14px;line-height:20px;color:var(--c-primary-500)}
.pk-v .btn,.wz-kd .btn{flex:none}
@media (max-width:767px){.pk-v{flex-wrap:wrap;justify-content:flex-start}.pk-v .mono{flex:1 1 100%}} /* телефон: значение на всю ширину, кнопка под ним слева */@media (max-width:1180px){.cn-rr-f{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){.cn-ov{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .cn-fails li{grid-template-columns:auto minmax(0,1fr);gap:var(--s-4) var(--s-12)}
  .cn-f-w{grid-column:1/-1}
  .cn-rr-f{grid-template-columns:minmax(0,1fr)}
  .cn-badrow td:first-child{border-left:0}
  /* №19: цепочка связи — компактный список без подписей колонок: Unit ID и звено слева, ответ справа, ниже причина красным */
  .tcards .cn-chain tr{grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:var(--s-4) var(--s-8);margin:0;padding:var(--s-12) 0;border:0;border-bottom:1px solid var(--c-gray-100);border-radius:0;background:none}
  .tcards .cn-chain tr:last-child{border-bottom:0}
  .tcards .cn-chain td[data-l]::before{content:none}
  .tcards .cn-chain td:first-child{grid-column:auto;color:var(--c-gray-600)}
  .tcards .cn-chain td:first-child:empty+td{grid-column:1/3}
  .tcards .cn-chain td:nth-child(3){text-align:right}
  .tcards .cn-chain td:nth-child(4){grid-column:1/-1}
  .tcards .cn-chain td:nth-child(4):not(:has(.bd-err)){display:none}
  .cn-chain .cn-todo{grid-column:1/-1;min-width:0;color:var(--c-red-500)}
}
@media (prefers-reduced-motion:reduce){.cn-hl td{animation-duration:0s}.cn-rr-h>svg.i,.cn-more-h>svg.i{transition:none}}

/* ===== Устройство (модуль 5, бэкенд 28.10): шапка, «Об устройстве», «Теги», «Настройки» (привязки, шаблон, паспорт), превью ===== */
.dv-meta{display:flex;align-items:center;gap:var(--s-4) var(--s-12);flex-wrap:wrap;margin-top:calc(-1 * var(--s-8));font:500 14px/20px var(--font);color:var(--c-gray-600)}
.dv-meta2{margin-top:calc(-1 * var(--s-12))}
/* шапка устройства: список «подпись — значение» (.kv). Компьютер — прежняя строка значений, подписи скрыты, у «Источника» видна; телефон — «Key-value row / Horizontal», подпись слева, значение справа */
@media (min-width:768px){
  .dv-spec.kv{display:flex}
  .dv-spec .kv-r{display:contents}
  .dv-spec dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);max-width:none}
  .dv-spec dd{flex:none;text-align:left;font:inherit;color:inherit}
  .dv-spec .dv-spec-src{display:flex;gap:var(--s-4)}
  .dv-spec .dv-spec-src dt{position:static;width:auto;height:auto;overflow:visible;clip:auto;font:inherit;color:inherit}
  .dv-spec .dv-spec-src dt::after{content:":"}
}
.dv-head{display:grid;gap:var(--gut)} /* на телефоне — белая карточка: значок состояния и строки «подпись — значение» (Figma 5205:152869) */
@media (max-width:767px){
  .dv-head{display:grid;gap:var(--s-8);padding:var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-12);background:var(--c-white)}
  .dv-head .dv-meta{margin-top:0}
  .dv-spec.kv{display:grid;gap:var(--s-8);margin-top:0}
  .dv-spec .kv-r{flex-direction:row;align-items:center;gap:var(--s-12)} /* ссылка «Подключение» — зона нажатия 44, подпись по её центру */
  .dv-spec dd{flex:1 1 0;width:auto;text-align:right}
}
.dv-in{display:inline-flex;align-items:center;gap:var(--s-4) var(--s-12);flex-wrap:wrap}
.tbl .dv-in{flex-wrap:nowrap}
.tcards .dv-in{flex-wrap:wrap}
.dv-tabs{display:flex}
.dv-u{margin-left:var(--s-4);font:500 14px/20px var(--font);color:var(--c-gray-600)}
.dv-bad{color:var(--c-red-500)}
.dv-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16) var(--gut);max-width:800px}
.dv-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap;padding-top:var(--s-12);border-top:1px solid var(--c-gray-100)}
.dv-foot-fix{position:sticky;bottom:0;z-index:1;padding-bottom:var(--s-12);background:var(--c-white)} /* есть несохранённые правки: полоса прилипает к низу окна */
.dv-foot-r{display:flex;gap:var(--s-12)}
.dv-tags td,.pv-tbl td{white-space:nowrap} /* без двухстрочных ячеек */
.pv-tbl .twrap{overflow-x:auto}
@media (max-width:767px){
  .dv-form{grid-template-columns:minmax(0,1fr)}
  /* карточка тега: название, ниже значение и качество, ниже мелким серым адрес; время — в панели тега */
  .dv-tags .tcards tr{grid-template-columns:auto minmax(0,1fr);gap:var(--s-4) var(--s-8)}
  .dv-tags .tcards td[data-l]::before{content:none}
  .dv-tags .tcards .dv-c-n{order:1}
  .dv-tags .tcards .dv-c-v{order:2}
  .dv-tags .tcards .dv-c-q{order:3}
  .dv-tags .tcards .dv-c-a{order:4;grid-column:1/-1;font:400 12px/16px var(--font);color:var(--c-gray-500)}
  .dv-tags .tcards .dv-c-t{display:none}
}

/* ===== Панель тега (модуль 5): просмотр тега устройства (значение, график, группы полей) и правка тега черновика ===== */
.tp-s{display:grid;gap:var(--s-8)}
.tp-h{font:700 14px/20px var(--font);color:var(--c-gray-600)}
.tp-dict{display:block}
.tp-grid{display:grid;gap:var(--s-16)}
.tp-dict-ed{display:grid;gap:var(--s-8)}
.tp-dr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:var(--s-8);align-items:start}
.tp-dr .field-err{grid-column:1}
.tp-help{display:block;font:400 14px/20px var(--font);color:var(--c-gray-600)}
.tp-pv{padding:var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.tp-pvh{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.tp-pvl{font:500 14px/20px var(--font);color:var(--c-primary-500);overflow-wrap:anywhere}
.tp-read{display:grid;gap:var(--s-2);font-size:14px;line-height:20px;color:var(--c-primary-500)}
/* график значений (ui/chart.js): линии 2 px, сетка и оси — приглушённые, разрыв — светлая полоса.
   Цвета линий — категориальный ряд (проверен валидатором dataviz: разделение для дальтоников, светлая тема); 9-я и 10-я линии повторяют цвет 1-й и 2-й пунктиром */
:root{--ch-0:var(--c-primary-400);--ch-1:#EB6834;--ch-2:#1BAF7A;--ch-3:#EDA100;--ch-4:#E87BA4;--ch-5:#008300;--ch-6:#6250D6;--ch-7:#E34948}
.ch-s0,.ch-s8{--c:var(--ch-0)}.ch-s1,.ch-s9{--c:var(--ch-1)}.ch-s2{--c:var(--ch-2)}.ch-s3{--c:var(--ch-3)}.ch-s4{--c:var(--ch-4)}.ch-s5{--c:var(--ch-5)}.ch-s6{--c:var(--ch-6)}.ch-s7{--c:var(--ch-7)}
.ch{display:block;width:100%;height:auto}
.ch-grid{stroke:var(--c-gray-100);stroke-width:1}
.ch-ax{font:500 14px var(--font);fill:var(--c-gray-600)}
.ch-line{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-s8 .ch-line,.ch-s9 .ch-line{stroke-dasharray:6 4}
.ch-line.ch-open{stroke-dasharray:2 4}
.ch-dot{fill:var(--c)}
.ch-q{fill:var(--c-white);stroke:var(--c);stroke-width:2}
.ch-gap{fill:var(--c-gray-50)}
.ch-hit{fill:transparent}
.ch-hit:hover{fill:var(--c-primary-50);fill-opacity:.6}
.ch-cur{stroke:transparent;stroke-width:1;pointer-events:none}
.ch-hit:hover+.ch-cur,.ch-hit:focus+.ch-cur{stroke:var(--c-primary-400)}
.ch-p+.ch-p{margin-top:var(--s-12)}
.ch-leg{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-20);margin-top:var(--s-12);list-style:none;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.ch-li{display:inline-flex;align-items:center;gap:var(--s-8);min-width:0}
.ch-sw{display:inline-block;flex:none;width:16px;height:2px;border-radius:var(--r-2);background:var(--c,var(--ch-0))}
.ch-s8.ch-sw,.ch-s9.ch-sw{background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 10px)}
.ch-swq{height:10px;width:10px;border:2px solid var(--c-primary-400);border-radius:var(--r-pill);background:var(--c-white)}
.ch-swg{height:12px;border:1px solid var(--c-gray-200);background:var(--c-gray-50)}
.chb{display:grid;gap:var(--s-12);min-width:0}
.chb-r,.chb-d{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-12);min-width:0}
.chb-d .field,.chb-f>.field,.chb-f>.field+.field{flex:0 1 240px;min-width:0}
.chb-f>.chb-sw{flex:1 1 100%}
.chb-sw .cbl{min-height:44px;align-items:center}
@media (max-width:767px){.chb-d .field,.chb-f>.field{flex:1 1 100%}}

/* ===== Мастер «Подключить оборудование» (модуль 6): окно Lg, шаги, строки Unit ID, проверка; на телефоне — снизу ===== */
.wz{width:min(840px,100%);height:min(92vh,760px)}
.wz>.mb{flex:1 1 auto} /* окно фиксированной высоты: подвал с кнопками всегда у нижнего края */
.wz-full{width:100%;height:100%;max-height:none}
.wz-b{gap:var(--s-16)}
/* шаги — «Stepper» Type=Bars (Figma 3941:95034, шаг 3941:94290): шаги через 8, полоса 4 r2 / подпись 8;
   впереди — полоса Серый/200, 14 Обычный Серый/300; текущий — Основной/500, 14 Жирный; пройден — Основной/500, 14 Полужирный */
.wz-steps{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:var(--s-8);margin:0;padding:0;list-style:none}
.wz-steps>li{display:grid;min-width:0}
.wz-si{display:grid;gap:var(--s-8);min-width:0;padding:0;border:0;background:none;text-align:left;font:400 14px/20px var(--font);color:var(--c-gray-500)}
.wz-bar{height:4px;border-radius:var(--r-2);background:var(--c-gray-200)}
.wz-sl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-cur{color:var(--c-primary-500);font-weight:700}
.wz-cur .wz-bar,.wz-done .wz-bar{background:var(--c-primary-500)}
.wz-done{color:var(--c-primary-500);font-weight:600;cursor:pointer}
.wz-done:hover .wz-sl{text-decoration:underline}
.wz-err{display:flex;gap:var(--s-4);align-items:flex-start;font:400 14px/20px var(--font);color:var(--c-red-500)}
.wz-err svg.i{flex:none;width:16px;height:16px;margin-top:var(--s-2)}
.wz-warn{display:flex;gap:var(--s-4);align-items:flex-start;font:400 14px/20px var(--font);color:var(--c-gray-600)}
.wz-warn svg.i{flex:none;width:16px;height:16px;margin-top:var(--s-2);color:var(--c-amber-500)}
.wz-s2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-16);align-items:start}
.wz-s2>.field:first-child{grid-column:1/-1}
.wz-list{display:grid;gap:var(--s-8)}
.wz-lh{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.wz-h3{font:700 14px/20px var(--font);color:var(--c-primary-500)}
.wz-rows,.wz-vrs{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.wz-row{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:var(--s-4) var(--s-12);min-height:44px;padding:var(--s-8) var(--s-12);font:500 14px/20px var(--font);color:var(--c-primary-500)}
.wz-row+.wz-row,.wz-vr+.wz-vr{border-top:1px solid var(--c-gray-100)}
.wz-row-bad{background:var(--c-red-50)}
.wz-l{min-width:0;overflow-wrap:anywhere}
.wz-r{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-8);flex-wrap:wrap;min-width:0}
.wz-r .sel{min-width:220px}
.wz-r .field-err{flex-basis:100%;justify-content:flex-end}
.wz-rn{font-weight:600}
.wz-gr{font:500 14px/20px var(--font);color:var(--c-gray-500)}
.wz-note{grid-column:1/-1;display:grid;gap:var(--s-8)}
.wz-rtpl{max-width:360px}
.wz-run{display:inline-flex;align-items:center;gap:var(--s-8);color:var(--c-gray-600)}
.wz-vr{display:grid;gap:var(--s-8);padding:var(--s-8) var(--s-12)}
.wz-vh{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s-12);width:100%;min-height:28px;padding:0;border:0;background:none;text-align:left;font:500 14px/20px var(--font);color:var(--c-primary-500)}
button.wz-vh{cursor:pointer}
.wz-nm{min-width:0;overflow-wrap:anywhere}
.wz-cnt{font-weight:600;color:var(--c-gray-600);white-space:nowrap}
.wz-ok{color:var(--c-green-600)}
.wz-warn{color:var(--c-amber-900)}
.wz-bad{color:var(--c-red-500)}
.wz-lk{font:600 14px/20px var(--font);color:var(--c-primary-400)}
.wz-vn{display:flex;gap:var(--s-4);align-items:flex-start;font:400 14px/20px var(--font);color:var(--c-gray-600)}
.wz-vn svg.i{flex:none;width:16px;height:16px;margin-top:var(--s-2)}
.wz-vl{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none;font:500 14px/20px var(--font);color:var(--c-gray-600)}
/* строка превью: параметр · источник и сырое · итог · качество (причина «Сомнительного» — под строкой) */
.wz-vl li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,0.9fr) 106px;align-items:center;gap:var(--s-4) var(--s-12)}
/* шапка таблицы превью: Bold 14 на сером, верх скруглён; поля те же, что у строк (отрицательный отступ до края строки шага) */
.wz-vlh{margin:0 calc(-1 * var(--s-12));padding:var(--s-8) var(--s-12);border-radius:var(--r-8) var(--r-8) 0 0;background:var(--c-gray-50);font:700 14px/20px var(--font);color:var(--c-primary-500)}
@media (max-width:767px){.wz-vl .wz-vlh{display:none}}
.wz-vl li>.wz-gr{grid-column:1/-1}
.wz-pn{min-width:0;overflow-wrap:anywhere}
.wz-src,.wz-rule{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-gray-500)}
.wz-vv{color:var(--c-primary-500);font-variant-numeric:tabular-nums;text-align:right}
.wz-vl .wz-bad .wz-vv{color:var(--c-red-500)}
.wz-sum{display:flex;gap:var(--s-4);align-items:flex-start;font:600 14px/20px var(--font);color:var(--c-primary-500)}
.wz-sum.wz-ok{color:var(--c-green-600)}
.wz-sum svg.i{flex:none;width:16px;height:16px;margin-top:var(--s-2)}
/* этап онбординга в шапке: «Этап: [Черновик]», у «Заблокировано» — причина */
.wz-stg{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4) var(--s-8);margin-top:var(--s-8);font:500 14px/20px var(--font);color:var(--c-gray-600)}
.wz-stg-w{color:var(--c-red-500)}
/* поля в ряд: вид кадра · таймаут · пауза; расписание; тест связи — 4 поля */
.wz-g3,.wz-g4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16);align-items:start}
.wz-g4{grid-template-columns:minmax(216px,1.2fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr)} /* подпись «Адрес устройства (Unit ID)» и функция длиннее, адрес и количество — короткие числа */
.wz-ta{display:flex;align-items:center;gap:var(--s-8) var(--s-16);flex-wrap:wrap}
.wz-raw{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-16);margin:0;padding:var(--s-8) var(--s-12);list-style:none;border:1px solid var(--c-gray-100);border-radius:var(--r-8);font:500 14px/20px var(--font);color:var(--c-primary-500)}
.wz-raw li{display:inline-flex;gap:var(--s-8)}
.wz-code{font:400 14px/20px var(--mono);color:var(--c-gray-600)}
.wz-kd{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;min-width:0}
.wz-kd .mono{min-width:0;overflow-wrap:anywhere;color:var(--c-primary-500)}
.wz-kv{min-width:0}
@media (min-width:768px){.wz-kd{flex-wrap:nowrap}} /* на компьютере значение переносится внутри себя, кнопка остаётся в одной линии с ним; на телефоне кнопка уходит под значение */
.wz-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-12);min-height:44px;padding:var(--s-8) var(--s-12);font:500 14px/20px var(--font);color:var(--c-primary-500)}
.wz-pr+.wz-pr{border-top:1px solid var(--c-gray-100)}
.wz-pr .sel{min-width:160px}
/* чек-лист условий запуска: отметка · условие (и причина) · «Исправить» */
.wz-cks{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.wz-ck{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:var(--s-8) var(--s-12);padding:var(--s-8) var(--s-12);font:500 14px/20px var(--font);color:var(--c-primary-500)}
.wz-ck+.wz-ck{border-top:1px solid var(--c-gray-100)}
.wz-ck>svg.i{width:20px;height:20px;color:var(--c-red-500)}
.wz-ck-t{display:grid;min-width:0}
.wz-ck-w{font-weight:400;color:var(--c-red-500)}
.wz-ck-warn>svg.i{color:var(--c-amber-900)}
.wz-ck-warn .wz-ck-w{color:var(--c-amber-900)}
.wz-ck-h{padding:var(--s-8) var(--s-12);background:var(--c-gray-50);font:600 14px/20px var(--font);color:var(--c-primary-500)}
.wz-ck-h:not(:first-child){border-top:1px solid var(--c-gray-100)}
.wz-h4{margin:var(--s-12) 0 var(--s-8);font:600 14px/20px var(--font);color:var(--c-primary-500)}
.wz-lc{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none;font:500 14px/20px var(--font);color:var(--c-primary-500)}
/* Телефон: окно по центру, как мастер отчёта (Figma 4074:80736, 328 на кадре 360 = 16 от краёв, r 16), высота по содержимому,
   не выше экрана — прокручивается тело. Низ: padding 0/16/20/16, gap 12, кнопки Sm 32 в ряд: «Назад» по ширине текста, основная растягивается;
   «Сохранить черновик» — отдельной строкой под кнопками. Шаги скрыты: в Figma степпер мастера на телефоне не описан, номер шага — в подзаголовке */
@media (max-width:767px){
  .wz-ov{align-items:center;padding:var(--s-16)}
  .wz,.wz-full{width:100%;height:auto;max-height:100%;border-radius:var(--r-16)}
  .wz-ov .mf{flex-wrap:wrap;gap:var(--s-12);padding:0 var(--s-16) calc(var(--s-20) + env(safe-area-inset-bottom,0px));border-top:0}
  .wz-ov .mf .btn{height:var(--h-sm);padding:0 var(--s-12);border-radius:var(--r-6)}
  .wz-ov .mf .btn-pri{flex:1 1 auto}
  .wz-ov .mf-l{order:1;flex-basis:100%;display:flex;justify-content:center;margin-right:0}
  .wz-steps{display:none}
  .wz-vh{grid-template-columns:minmax(0,1fr) auto}
  .wz-nm{grid-column:1/-1}
  .wz-s2{grid-template-columns:minmax(0,1fr)}
  .wz-row{grid-template-columns:minmax(0,1fr) 28px}
  .wz-r{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .wz-r .sel{min-width:0;flex:1 1 auto}
  .wz-g3,.wz-g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wz-g3>.field:first-child,.wz-g4>.field:nth-child(-n+2){grid-column:1/-1}
  .wz-g3-l>.field:first-child{grid-column:auto} /* расписание: во всю ширину — последнее поле с длинной подписью */
  .wz-g3-l>.field:last-child{grid-column:1/-1}
  .wz-vl li{grid-template-columns:minmax(0,1fr) auto auto}
  .wz-src{grid-column:1/-1;grid-row:2}
  .wz-rule{grid-column:1/-1;grid-row:3}
  .wz-pr{grid-template-columns:minmax(0,1fr)}
  .wz-pr .sel{min-width:0}
}

/* ===== «Настройки прототипа» (вне продукта): шестерёнка справа внизу и панель ===== */
.proto-fab{position:fixed;z-index:var(--z-proto);right:max(var(--s-24),env(safe-area-inset-right,0px));bottom:calc(var(--s-24) + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--c-gray-200);border-radius:var(--r-pill);background:var(--c-white);color:var(--c-primary-500)}
.proto-fab:hover{background:var(--c-gray-100)}
.proto-fab .i{width:24px;height:24px}
.proto-fab[aria-expanded=true]{background:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-white)}
.proto{position:fixed;z-index:var(--z-proto);right:max(var(--s-24),env(safe-area-inset-right,0px));bottom:calc(var(--s-24) + 56px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 128px);border:1px solid var(--c-gray-200);border-radius:var(--r-12);background:var(--c-white)}
.proto-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);padding:var(--s-12) var(--s-16);border-bottom:1px solid var(--c-gray-100)}
.proto-h h2{font:700 16px/24px var(--font);color:var(--c-primary-500)}
.proto-b{display:grid;gap:var(--s-16);align-content:start;justify-items:start;min-height:0;overflow:auto;padding:var(--s-16)}
.proto-g{display:grid;gap:var(--s-8);justify-items:start;width:100%}
.proto-l{font:600 14px/20px var(--font);color:var(--c-gray-600)}
.proto .seg{display:flex;flex-wrap:wrap;overflow:visible;width:100%}
.proto-b>.bd{height:auto;min-height:24px;padding:var(--s-2) var(--s-8);border-radius:var(--r-8);white-space:normal}
.proto-row{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.proto-cb{display:inline-flex;align-items:flex-start;gap:var(--s-8);font:500 14px/20px var(--font);color:var(--c-primary-500);cursor:pointer}
.proto-n{font:500 14px/20px var(--font);color:var(--c-gray-600)}
.proto-sec{display:grid;gap:var(--s-8);justify-items:start;width:100%;min-width:0;margin:0;padding:var(--s-12) 0 0;border:0;border-top:1px solid var(--c-gray-100)}
.proto-sec legend{float:left;width:100%;margin-bottom:var(--s-4);padding:0}
.proto-pl{font:500 14px/20px var(--font);color:var(--c-primary-500)}
@media (max-width:767px){
  .proto-fab{right:var(--s-16);bottom:calc(var(--s-16) + env(safe-area-inset-bottom,0px))}
  .proto{right:var(--s-16);left:var(--s-16);width:auto;bottom:calc(var(--s-16) + 56px + env(safe-area-inset-bottom,0px))}
}

/* ==== модуль 7: шаблоны устройств (screens/models.js, model.js, draft.js, tplforms.js, csvimp.js) ==== */
.tm-meta{display:flex;align-items:baseline;gap:var(--s-4) var(--s-8);flex-wrap:wrap;margin-top:calc(-1 * var(--s-8));font:500 14px/20px var(--font);color:var(--c-gray-600)}
.tm-q{margin:0;padding:var(--s-4) var(--s-12);border-left:2px solid var(--c-gray-200);font:500 14px/20px var(--font);color:var(--c-gray-600)}
.tm-nm{display:inline-flex;align-items:center;gap:var(--s-8);white-space:nowrap}
.tm-vc{display:inline-flex;align-items:center;gap:var(--s-4);white-space:nowrap}
.tm-b{font-weight:600;color:var(--c-primary-500)}
.tm-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-16);align-items:start}
.tm-in{display:inline-flex;align-items:center;gap:var(--s-4) var(--s-8);flex-wrap:wrap}
.tm-rules li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8)}
.tm-rule-a{display:inline-flex;gap:var(--s-4);flex:none}
.tm-wl{display:grid;gap:var(--s-8);margin:0;padding:0;list-style:none;font:500 14px/20px var(--font)}
.tm-h3{margin:var(--s-12) 0 var(--s-4);font:600 14px/20px var(--font);color:var(--c-primary-500)}
.tm-ul.tm-rbl{list-style:none;padding-left:0}
.tm-rbl li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.tm-ul{display:grid;gap:var(--s-4);margin:0;padding-left:var(--s-20);font:500 14px/20px var(--font);color:var(--c-primary-500)}
.tm-vt .lnk svg.i{width:16px;height:16px;vertical-align:middle}
.tm-cur td{background:var(--c-gray-50)}
.tm-det>td{background:var(--c-gray-50)}
.tm-det>td>p{margin:0 0 var(--s-8)}
.tm-dt-l{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.tm-run{display:inline-flex;align-items:center;gap:var(--s-8);color:var(--c-gray-600)}
.tm-bad,.tm-bad .dv-u{color:var(--c-red-500)} /* ошибка чтения: красный текст */
.tm-was{color:var(--c-gray-500)}
.tm-dtags td.tm-chg{background:var(--c-amber-50)}
.tm-dtags tr.tm-del td{color:var(--c-gray-500);text-decoration:line-through}
.tm-dtags tr.tm-del td.t-act{text-decoration:none}
.tm-dtags .t-act{white-space:nowrap}
.tm-flash td{animation:tm-flash 2s ease-out forwards}
@keyframes tm-flash{0%,80%{background:var(--c-primary-50)}100%{background:transparent}}
.tm-bulk{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap;min-height:40px;padding:var(--s-4) var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.tm-bulk-l,.tm-bulk-r{display:inline-flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.tm-bulk-r{gap:var(--s-8)}
.tm-foot{position:sticky;bottom:0;z-index:1;display:flex;justify-content:flex-end;gap:var(--s-8);flex-wrap:wrap;padding:var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-12);background:var(--c-white)}
.tm-ta{height:auto;min-height:88px;padding:var(--s-8);resize:vertical}
.tm-list{display:grid;gap:var(--s-8);max-height:240px;overflow:auto;padding:var(--s-8) 0}
.tm-cbl{width:100%}
.tm-sum{display:grid;gap:var(--s-4)}
.imp{display:grid;gap:var(--s-16)}
.imp-dz{display:grid;justify-items:center;gap:var(--s-8);padding:var(--s-24) var(--s-16);border:1px dashed var(--c-gray-400);border-radius:var(--r-12);text-align:center;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.imp-over{border-color:var(--c-primary-400);background:var(--c-primary-50)}
.imp-bad{border-color:var(--c-red-500)}
.imp-file{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);padding:var(--s-8) var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-8);font:500 14px/20px var(--font)}
.imp-file svg.i{width:16px;height:16px;vertical-align:middle;color:var(--c-gray-500)}
.imp-cols{color:var(--c-gray-600)}
.imp-rej{color:var(--c-red-500)}
.imp-t td{vertical-align:top}
.imp-t td.imp-w{min-width:280px;white-space:normal}
.tcards .imp-t td.imp-w{order:99;min-width:0} /* на телефоне причина, как раньше, в конце карточки */
@media (max-width:1023px){
  .tm-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .tm-nm{white-space:normal;flex-wrap:wrap} /* длинное название шаблона и бейдж в карточке переносятся, а не выходят за край */
  .tm-foot .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.tm-flash td{animation-duration:0s}}

/* ===== Входящие данные (модуль «Новые разделы», screens/inbox.js): вкладки, ряд фильтров, массовые действия, карточка записи ===== */
.ix-tabs{display:flex}
.ix-body{display:grid;gap:var(--gut);min-width:0}
.ix-card{gap:var(--s-12)}
.ix-bar{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;min-width:0}
.ix-q{flex:0 1 320px}
.ix-acts{display:inline-flex;align-items:center;gap:var(--s-8)}
.tbl .ix-act{white-space:nowrap}
.ix-d{display:grid;gap:var(--s-16)}
.ix-h3{font:700 14px/20px var(--font);color:var(--c-primary-500)}
.ix-h4{font:700 14px/20px var(--font);color:var(--c-gray-600);margin:var(--s-8) 0 0}
.ix-bad{color:var(--c-red-500)}
.ix-none{font:400 14px/20px var(--font);color:var(--c-gray-600)}
.ix-d .twrap{overflow-x:auto}
@media (max-width:767px){
  .ix-q{flex:1 1 100%}
}

/* ===== Телеметрия станции (модуль «Новые разделы», screens/tele.js): сумма по IoT, заглушка источника, график ===== */
.tl-p{display:grid;gap:var(--s-8);min-width:0}
.tl-sum{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;font:600 14px/20px var(--font);color:var(--c-primary-500)}
.tl-sub{font:400 14px/20px var(--font);color:var(--c-gray-600)}
.tl-skip{display:grid;gap:var(--s-4);margin:0;padding-left:var(--s-20);font:400 14px/20px var(--font);color:var(--c-primary-500)}
.tl-skip b{font-weight:600}
.tl-pk .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.tl-pk4 .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1279px){.tl-pk4 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tl-chart{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8);min-width:0}
.tl-ch-h{font:600 16px/24px var(--font);color:var(--c-primary-500)}
.tl-ch{min-width:0;width:100%;margin-top:var(--s-12)}
.tl-ch svg{display:block;width:100%;height:auto}
@media (max-width:767px){
  .tl-pk .kpis{grid-template-columns:minmax(0,1fr)}
  .tl-kpis .kpi-ic{display:none}
}

/* ===== Шаблоны и каталоги (бэкенд 28.10, п. 6–7: screens/models.js, catalogs.js, model.js, draft.js, tplforms.js) ===== */
.cat-tabs{display:flex}
.tm-col{display:grid;gap:var(--s-16);min-width:0}
.tm-why{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.tm-dtags tr.tm-errow td{border-bottom:0;background:var(--c-red-50)}
.tm-dtags tr.tm-err-r td{padding-top:0;background:var(--c-red-50)}
.tm-foot-h{margin-right:auto;align-self:center}
.tm-upd1{margin:0;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.tm-vd{display:grid;gap:var(--s-8);min-width:0}
.tm-vd .field{max-width:360px}
.cm-tpl{display:inline-flex;align-items:baseline;gap:var(--s-8);white-space:nowrap}
@media (max-width:767px){
  .tm-why{max-width:none;white-space:normal}
  .cm-tpl{white-space:normal;flex-wrap:wrap}
}

/* ===== Аудит 28.10: главная (группа KPI «Устройства») и «Сбои связи» подключения (модули 3–4) ===== */
.mb-kg{display:grid;gap:var(--s-8);min-width:0}
.cn-fl-h{padding-top:var(--s-4)}

/* ===== События связи (screens/events.js): «было → стало», метка прошивки, пояснения ===== */
.ev-ch{display:inline-flex;align-items:center;gap:var(--s-4);white-space:nowrap}
.ev-ar{display:inline-flex;color:var(--c-gray-500)}
.ev-ar svg{width:16px;height:16px}
.ev-why{display:inline-flex;align-items:center;gap:var(--s-8)}
.ev-note{font:400 14px/20px var(--font);color:var(--c-gray-600)}
@media (max-width:767px){
  .ev-ch,.ev-why{flex-wrap:wrap;justify-content:flex-end}
}

/* ===== Тест версии (screens/maptest.js) ===== */
.mt-srcs{display:grid;gap:var(--s-16)}
.mt-src{display:grid;gap:var(--s-12);min-width:0}
.mt-src+.mt-src{padding-top:var(--s-16);border-top:1px solid var(--c-gray-100)}
.mt-ck{align-items:flex-start;color:var(--c-primary-500)}
.mt-ck b{font-weight:600}
.mt-sub{display:grid;gap:var(--s-12);min-width:0;padding-left:28px}
.mt-list{max-width:520px;padding:var(--s-8);border:1px solid var(--c-gray-100);border-radius:var(--r-8)}
.mt-row{display:flex;flex-wrap:wrap;gap:var(--s-12)}
.mt-row .field{flex:0 1 240px;min-width:0}
.mt-smps,.mt-smp-l{display:grid;gap:var(--s-12);margin:0;padding:0;list-style:none}
.mt-smp{display:grid;gap:var(--s-16);padding:var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-8);min-width:0}
.mt-smp-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.mt-smp-s{display:grid;gap:var(--s-8);justify-items:start;min-width:0}
.mt-smp-s>*{min-width:0;max-width:100%}
.mt-smp-l{width:100%}
.mt-smp-r{display:grid;gap:var(--s-12);align-items:flex-start}
.mt-smp-r2{grid-template-columns:minmax(0,2fr) minmax(0,2fr) auto}
.mt-smp-r3{grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,3fr) auto}
.mt-smp-x{margin-top:28px}
.mt-go{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap}
.mt-o{display:inline-flex;align-items:center;gap:var(--s-4) var(--s-8);flex-wrap:wrap;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.mt-codes{margin:0}
.mt-x{margin:0;font:500 14px/20px var(--font);color:var(--c-primary-500)}
.mt-next{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;margin:0}
.mt-pick{flex:0 1 360px;min-width:0}
/* от 1024: три источника в ряд — «Сохранённые данные» | «Живое чтение» | «Ручные примеры» (у push-карты живого чтения нет — две колонки); колонки равны, ширина колонки = ширина её полей */
@media (min-width:1024px){
  .mt-srcs{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start}
  .mt-src+.mt-src{padding:0 0 0 var(--s-16);border-top:0;border-left:1px solid var(--c-gray-100)}
  .mt-row .field{flex:1 1 100%}
  .mt-smp-r2,.mt-smp-r3{grid-template-columns:minmax(0,1fr)}
  .mt-smp-x{margin-top:0;justify-self:end}
}
@media (max-width:767px){
  .mt-sub{padding-left:0}
  .mt-smp-r2,.mt-smp-r3{grid-template-columns:minmax(0,1fr)}
  .mt-smp-x{margin-top:0;justify-self:end}
  .mt-row .field,.mt-pick{flex:1 1 100%}
  .mt-go .btn,.mt-next .btn{flex:1 1 auto}
}

/* ===== Сессии подключения (screens/sessions.js) и вкладка «Привязки» (screens/conn-binds.js) ===== */
.ob-act{display:inline-flex;align-items:center;gap:var(--s-8);flex-wrap:nowrap}
.bd-act{display:inline-flex}
@media (max-width:767px){
  .ob-act,.bd-act{justify-content:flex-end;flex-wrap:wrap}
}

/* ===== История шаблона и массовое действие (screens/mhist.js) ===== */
.mh-marks{display:inline-flex;flex-wrap:nowrap;gap:var(--s-4)}
.mh-v{white-space:nowrap}
@media (max-width:767px){
  .mh-marks{justify-content:flex-end;flex-wrap:wrap}
  .mh-v{white-space:normal}
}
.tm-flt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-12)}
.tm-bds{display:flex;flex-wrap:wrap;gap:var(--s-8);margin:0}
.bk-pair{display:grid;gap:var(--gut)}
@media (min-width:1024px){.bk-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-pair>.card:only-child{grid-column:1/-1}} /* «О действии» и «Результат» рядом, поровну и одной высоты (stretch); без результата — одна на всю ширину */
.bk-sts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);margin:0}
.bk-st{border:1px solid var(--c-primary-100);border-radius:var(--r-8);padding:var(--s-12);display:grid;gap:var(--s-4)}
.bk-st-l{font:500 14px/20px var(--font);color:var(--c-primary-500)}
.bk-st-n{margin:0;font:700 20px/28px var(--font);color:var(--c-primary-500)}