/* Страница решения «Телеметрия сельхозтехники через ISOBUS» (solution-isobus.html).
   Подключается только на ней, общий styles.css не меняет.
   Все цвета схем — переменные темы, поэтому SVG сами переключаются между
   светлой и тёмной схемой вместе с сайтом. Экраны приборов (терминал, табло,
   журнал) всегда тёмные, как у настоящих устройств.
   Интерактив — solution-isobus.js. Без скрипта (нет класса .isb-js на <html>)
   все вкладки и состояния показаны сразу, страница остаётся полной. */

/* ---------- Цвета рисунков ---------- */
:root,
[data-theme="light"] {
  --isb-soil: #ebe1cd;
  --isb-furrow: #d9c9a9;
  --isb-furrow-dark: #c4b08a;
  --isb-bound: #b39f78;
  --isb-sown: #93c272;
  --isb-sown-dot: #5b9440;
  --isb-steel: #5b6b7d;
  --isb-tyre: #25313e;
  --isb-rim: #c9d3dd;
  --isb-impl: #4e8a3a;
  --isb-impl-lid: #3d7030;
  --isb-glass: #cbe7f4;
  --isb-frame: #2a3846;
  --isb-cab: #233140;
  --isb-dash: #31455a;
  --isb-sky-a: #9fd0ea;
  --isb-sky-b: #eaf5fb;
  --isb-far: #8fba7c;
  --isb-cable: #2b3744;
  --isb-wet: #3f9a7a;
  --isb-seedc: #f1b440;
  --isb-double: #7c4ddb;
  --isb-ok: #15803d;
  --isb-ok-bg: rgba(21, 128, 61, 0.12);
  --isb-bad: #c2410c;
  --isb-season: linear-gradient(90deg, #9cc8f0 0%, #c9e0f6 44%, #9ddc9a 58%, #5fbf5a 78%, #e9c43b 100%);
}

[data-theme="dark"] {
  --isb-soil: #2c2922;
  --isb-furrow: #3b372d;
  --isb-furrow-dark: #4a4537;
  --isb-bound: #5b5342;
  --isb-sown: #355d2b;
  --isb-sown-dot: #6aa04d;
  --isb-steel: #7a8899;
  --isb-tyre: #0a1018;
  --isb-rim: #4b5a6b;
  --isb-impl: #4b8436;
  --isb-impl-lid: #3a6a29;
  --isb-glass: #1c3747;
  --isb-frame: #0a1118;
  --isb-cab: #0c141d;
  --isb-dash: #17222e;
  --isb-sky-a: #16304a;
  --isb-sky-b: #2d4d63;
  --isb-far: #2e4a33;
  --isb-cable: #8292a6;
  --isb-wet: #2f8a6c;
  --isb-seedc: #f2c94c;
  --isb-double: #a78bfa;
  --isb-ok: #4ade80;
  --isb-ok-bg: rgba(74, 222, 128, 0.14);
  --isb-bad: #fb923c;
  --isb-season: linear-gradient(90deg, #3b6a99 0%, #4f7ea8 44%, #3f8f4a 58%, #4fa04a 78%, #b8972a 100%);
}

/* ---------- Общие классы рисунков ---------- */
.dg-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.dg-zone { fill: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; }
.dg-link { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-dev { fill: #1e293b; stroke: #334155; stroke-width: 1.5; }
.art-led-on { fill: #34d399; }

.dg-flow {
  stroke-dasharray: 9 9;
  animation: dg-flow 1.4s linear infinite;
}

@keyframes dg-flow {
  to { stroke-dashoffset: -36; }
}

/* «Бегущие» точки данных поверх линии */
.dg-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0 36;
  animation: dg-pulse 1.6s linear infinite;
}

.dg-pulse--alt { stroke: var(--accent2); }

@keyframes dg-pulse {
  to { stroke-dashoffset: -36; }
}

.isb-soil { fill: var(--isb-soil); }
.isb-furrow { fill: none; stroke: var(--isb-furrow); stroke-width: 2; stroke-linecap: round; }
.isb-furrow-over { fill: none; stroke: var(--isb-furrow-dark); stroke-width: 2.5; stroke-linecap: round; opacity: 0.45; }
.isb-bound { fill: none; stroke: var(--isb-bound); stroke-width: 1.5; stroke-dasharray: 6 6; }
.isb-sown { fill: var(--isb-sown); }
.isb-sown-dot { fill: var(--isb-sown-dot); }
.isb-steel { fill: var(--isb-steel); }
.isb-steel-line { fill: none; stroke: var(--isb-steel); stroke-width: 6; stroke-linecap: round; }
.isb-impl { fill: var(--isb-impl); }
.isb-impl-lid { fill: var(--isb-impl-lid); }
.isb-units { stroke: var(--isb-impl-lid); stroke-width: 3; stroke-linecap: round; }
.isb-tyre { fill: var(--isb-tyre); }
.isb-rim { fill: var(--isb-rim); }
.isb-hub { fill: var(--isb-steel); }
.isb-body { fill: var(--accent2); }
.isb-cabtop { fill: var(--accent2-strong); }
.isb-led { fill: #34d399; }
.isb-led-b { fill: #60a5fa; }
.isb-glass { fill: var(--isb-glass); stroke: var(--isb-frame); stroke-width: 5; stroke-linejoin: round; }
.isb-seedfill { fill: var(--isb-seedc); }
.isb-disc { fill: var(--isb-rim); stroke: var(--isb-steel); stroke-width: 3; }
.isb-ecu { fill: #1e293b; stroke: #334155; stroke-width: 1.5; }
.isb-exhaust { fill: #3b4654; }
.isb-grille { fill: none; stroke: var(--accent2-strong); stroke-width: 3; stroke-linecap: round; }
.isb-fender { fill: none; stroke: var(--accent2-strong); stroke-width: 10; stroke-linecap: round; }
.isb-wheel { fill: none; stroke: var(--isb-frame); stroke-width: 3; }
.isb-screen { fill: #0b1220; }
.isb-screen-bar { fill: #34d399; }
.isb-dev-shell { fill: #1e293b; stroke: #334155; stroke-width: 1.5; }
.isb-dev-line { fill: #475569; }
.isb-screen-num { fill: #fbbf24; font: 700 17px ui-monospace, Consolas, 'Courier New', monospace; }
.isb-arrowhead { fill: var(--accent); }
.isb-chart-bar { fill: var(--accent); }
.isb-chart-bar--alt { fill: var(--accent2); }
.isb-sky-a { stop-color: var(--isb-sky-a); }
.isb-sky-b { stop-color: var(--isb-sky-b); }

/* ---------- Первый экран ---------- */
.isb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.isb-hero h1 {
  font-size: clamp(1.75rem, 3.3vw, 2.55rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.isb-hero__lead {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 1.4rem;
}

.isb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.isb-badges {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.isb-badges li {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

/* Живое поле: карточка «как в мониторинге» */
.isb-live {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.isb-live__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.isb-live__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #22c55e;
  animation: isb-live 1.8s ease-out infinite;
}

@keyframes isb-live {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}

.isb-live__time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.isb-field {
  display: block;
  width: 100%;
  height: auto;
}

.isb-ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: isb-ping 2s ease-out infinite;
}

@keyframes isb-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

.isb-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  background: #0b1220;
}

.isb-hud > div {
  padding: 0.65rem 0.8rem;
  border-right: 1px solid #1e293b;
  min-width: 0;
}

.isb-hud > div:last-child { border-right: 0; }

.isb-hud dt {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

.isb-hud dd {
  margin: 0.15rem 0 0;
  color: #cbd5e1;
  font-size: 0.78rem;
  white-space: nowrap;
}

.isb-hud b {
  font-family: ui-monospace, Consolas, 'Courier New', monospace;
  font-size: 1.25rem;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}

.isb-hud .isb-state { color: #94a3b8; font-size: 1.05rem; }
.isb-hud .isb-state.is-on { color: #34d399; }

.isb-live figcaption {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.5rem 0.9rem;
}

@media (max-width: 900px) {
  .isb-hero { grid-template-columns: 1fr; }
  .isb-live { max-width: 600px; width: 100%; margin: 0 auto; }
}

@media (max-width: 520px) {
  .isb-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .isb-hud > div:nth-child(2) { border-right: 0; }
  .isb-hud > div:nth-child(-n + 2) { border-bottom: 1px solid #1e293b; }
}

/* ---------- Сегментный переключатель ---------- */
.isb-seg {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.25rem;
  box-shadow: var(--shadow-sm);
}

.isb-seg__btn {
  border: 0;
  background: transparent;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.isb-seg__btn:hover { color: var(--text); }

.isb-seg__btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  box-shadow: var(--shadow-md);
}

/* Без скрипта переключатель не нужен — показаны оба состояния */
html:not(.isb-js) .isb-seg { display: none; }

/* ---------- Проблема: сравнение ---------- */
.isb-cmp-list {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}

.isb-cmp {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.2rem;
  transition: border-color 0.35s, box-shadow 0.35s;
}

.isb-cmp__ico {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
}

.isb-cmp h3 {
  margin: 0.55rem 0 0.6rem;
  font-size: 1.02rem;
}

.isb-cmp p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.94rem;
}

.isb-cmp__tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.isb-cmp__before { color: var(--muted); }
.isb-cmp__after .isb-cmp__tag { color: var(--accent); }
.isb-cmp__after b { color: var(--accent-strong); }

html:not(.isb-js) .isb-cmp__after {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}

/* Значок состояния в углу карточки */
.isb-cmp::after {
  content: '?';
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--muted);
  background: var(--alt);
  transition: background 0.35s, color 0.35s, transform 0.35s;
}

html:not(.isb-js) .isb-cmp::after { display: none; }

.isb-js .isb-cmp {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.isb-js .isb-cmp__before,
.isb-js .isb-cmp__after {
  grid-row: 3;
  grid-column: 1;
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
}

.isb-js .isb-compare[data-state="before"] .isb-cmp__after {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.isb-js .isb-compare[data-state="after"] .isb-cmp__before {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
}

.isb-compare[data-state="after"] .isb-cmp {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.isb-compare[data-state="after"] .isb-cmp::after {
  content: '\2713';
  color: #fff;
  background: var(--isb-ok);
  transform: rotate(360deg);
}

.isb-compare[data-state="after"] .isb-cmp:nth-child(2) { transition-delay: 0.06s; }
.isb-compare[data-state="after"] .isb-cmp:nth-child(3) { transition-delay: 0.12s; }
.isb-compare[data-state="after"] .isb-cmp:nth-child(4) { transition-delay: 0.18s; }
.isb-compare[data-state="after"] .isb-cmp:nth-child(5) { transition-delay: 0.24s; }

/* Подсказка: переключатель мигает, пока его не нажали */
.isb-compare[data-hint] .isb-seg__btn[data-compare-set="after"] {
  animation: isb-hint 2.2s ease-in-out infinite;
}

@keyframes isb-hint {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-light); }
  50% { box-shadow: 0 0 0 6px var(--accent-light); }
}

/* Ключевая мысль */
.isb-insight {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent2);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
}

.isb-insight__art {
  width: 200px;
  flex: none;
  height: auto;
}

.isb-insight p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .isb-insight { flex-direction: column; align-items: flex-start; }
}

/* ---------- Схема «один прибор» ---------- */
.isb-arch__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.isb-arch__svg {
  display: block;
  width: 100%;
  height: auto;
}

.isb-arch__dest {
  border: 1.5px dashed var(--line);
  border-radius: 0.9rem;
  padding: 0.9rem;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.isb-arch__dest-title {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.isb-arch__dest ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.isb-arch__dest li {
  background: var(--alt);
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  display: grid;
  gap: 0.1rem;
  transition: transform 0.4s;
}

.isb-arch__dest b { font-size: 0.92rem; }
.isb-arch__dest li span { font-size: 0.8rem; color: var(--muted); }

.isb-arch[data-active="3"] .isb-arch__dest {
  border-style: solid;
  border-color: var(--accent2);
  box-shadow: 0 0 0 4px var(--accent2-light);
}

.isb-arch[data-active="3"] .isb-arch__dest li { animation: isb-pop 0.5s both; }
.isb-arch[data-active="3"] .isb-arch__dest li:nth-child(2) { animation-delay: 0.12s; }
.isb-arch[data-active="3"] .isb-arch__dest li:nth-child(3) { animation-delay: 0.24s; }

@keyframes isb-pop {
  0% { transform: translateX(-10px); opacity: 0.3; }
  100% { transform: none; opacity: 1; }
}

/* Сети машины: в покое — пунктир, на шаге 2 — сплошные и с данными */
.isb-bus {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 8;
  opacity: 0.6;
  transition: opacity 0.4s;
}

.isb-bus--iso {
  stroke: var(--isb-cable);
  stroke-width: 5;
  stroke-dasharray: none;
  opacity: 1;
}

.isb-socket { fill: var(--accent2-strong); stroke: var(--isb-cable); stroke-width: 2; }
.isb-iso-label { fill: var(--accent2-strong); font-size: 17px; font-weight: 800; letter-spacing: 0.06em; }

.isb-arch[data-active="2"] .isb-bus:not(.isb-bus--iso) { stroke-dasharray: none; opacity: 1; }

.isb-s2 { opacity: 0; transition: opacity 0.4s; }
.isb-arch[data-active="2"] .isb-s2 { opacity: 1; }

.isb-chip rect { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.isb-chip text { fill: var(--text); font-size: 15px; font-weight: 700; }

.isb-chip {
  transform-box: fill-box;
  animation: isb-float 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes isb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.isb-s1 { transition: filter 0.4s; }
.isb-arch[data-active="1"] .isb-s1 { filter: drop-shadow(0 0 7px var(--accent2)); }

.isb-wave {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.3;
}

.isb-arch[data-active="3"] .isb-wave,
.isb-wave--on {
  animation: isb-wave 1.8s ease-in-out infinite;
}

.isb-arch[data-active="3"] .isb-wave:nth-child(2),
.isb-wave--on:nth-of-type(2) { animation-delay: 0.25s; }
.isb-arch[data-active="3"] .isb-wave:nth-child(3),
.isb-wave--on:nth-of-type(3) { animation-delay: 0.5s; }

@keyframes isb-wave {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.isb-uplink {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 4 8;
  opacity: 0.3;
  transition: opacity 0.4s;
}

.isb-uplink-pulse { display: none; }
.isb-arch[data-active="3"] .isb-uplink { opacity: 1; }
.isb-arch[data-active="3"] .isb-uplink-pulse { display: inline; }

/* Метки шагов на рисунке */
.isb-mark circle {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
  transition: fill 0.3s, stroke 0.3s;
}

.isb-mark text {
  fill: var(--accent-strong);
  font-size: 22px;
  font-weight: 800;
  transition: fill 0.3s;
}

.isb-arch[data-active="1"] .isb-mark[data-mark="1"] circle,
.isb-arch[data-active="2"] .isb-mark[data-mark="2"] circle,
.isb-arch[data-active="3"] .isb-mark[data-mark="3"] circle {
  fill: var(--accent2);
  stroke: var(--accent2);
}

.isb-arch[data-active="1"] .isb-mark[data-mark="1"] text,
.isb-arch[data-active="2"] .isb-mark[data-mark="2"] text,
.isb-arch[data-active="3"] .isb-mark[data-mark="3"] text {
  fill: var(--on-accent2);
}

.isb-arch[data-active="1"] .isb-mark[data-mark="1"],
.isb-arch[data-active="2"] .isb-mark[data-mark="2"],
.isb-arch[data-active="3"] .isb-mark[data-mark="3"] {
  animation: isb-mark 1.6s ease-in-out infinite;
}

@keyframes isb-mark {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px var(--accent2)); }
}

/* Шаги под схемой — кнопки */
.isb-arch__steps {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.isb-step {
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.isb-step:hover { transform: translateY(-2px); border-color: var(--accent); }

.isb-step[aria-pressed="true"] {
  border-color: var(--accent2);
  box-shadow: var(--shadow-md);
}

.isb-step__num {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--accent-light);
  color: var(--accent-strong);
  transition: background 0.3s, color 0.3s;
}

.isb-step[aria-pressed="true"] .isb-step__num {
  background: var(--accent2);
  color: var(--on-accent2);
}

.isb-step__body {
  display: grid;
  gap: 0.3rem;
}

.isb-step__body > span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Полоска автопоказа: сколько осталось до следующего шага */
.isb-step::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--accent2);
}

.isb-arch.is-auto .isb-step[aria-pressed="true"]::after {
  animation: isb-progress var(--isb-step-ms, 5000ms) linear forwards;
}

@keyframes isb-progress {
  to { width: 100%; }
}

@media (max-width: 900px) {
  .isb-arch__stage { grid-template-columns: 1fr; }
  .isb-arch__dest ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .isb-arch__steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .isb-arch__stage { padding: 0.6rem; }
  .isb-arch__dest ul { grid-template-columns: 1fr; }
}

/* ---------- Кабина: группы параметров ---------- */
.isb-cab {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

.isb-cab__view {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--isb-cab);
}

.isb-cab__svg {
  display: block;
  width: 100%;
  height: auto;
}

.isb-cabframe { fill: var(--isb-cab); }
.isb-dash { fill: var(--isb-dash); }
.isb-steer { fill: none; stroke: #0b1119; stroke-width: 16; stroke-linecap: round; }
.isb-far { fill: var(--isb-far); }
.isb-haze { fill: var(--isb-sky-b); opacity: 0.55; }
.isb-arm { fill: none; stroke: #334155; stroke-width: 8; stroke-linecap: round; }

.isb-persp {
  fill: none;
  stroke: var(--isb-sown-dot);
  stroke-width: 3;
  opacity: 0.55;
}

.isb-persp--move {
  stroke: var(--isb-sown);
  stroke-width: 5;
  opacity: 0.9;
  stroke-dasharray: 3 26;
  animation: isb-persp 1.2s linear infinite;
}

@keyframes isb-persp {
  to { stroke-dashoffset: -29; }
}

.isb-gauge__face { fill: #0b1220; stroke: #334155; stroke-width: 2; }
.isb-gauge__arc { fill: none; stroke: #475569; stroke-width: 4; stroke-linecap: round; }
.isb-gauge__red { fill: none; stroke: #ef4444; stroke-width: 4; stroke-linecap: round; }
.isb-gauge__hub { fill: #e2e8f0; }

.isb-gauge__needle {
  stroke: #fbbf24;
  stroke-width: 3;
  stroke-linecap: round;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.isb-gauge__txt { fill: #e2e8f0; font: 700 13px ui-monospace, Consolas, monospace; }
.isb-gauge__unit { fill: #94a3b8; font-size: 7px; letter-spacing: 0.12em; }

.isb-screen-top { fill: #111c2e; }
.isb-term-mode { fill: #34d399; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.isb-term-small { fill: #94a3b8; font: 10px ui-monospace, Consolas, monospace; }
.isb-term-big { fill: #fbbf24; font: 700 30px ui-monospace, Consolas, monospace; }
.isb-term-big--sm { font-size: 17px; }
.isb-term-unit { fill: #cbd5e1; font-size: 13px; }
.isb-term-rows rect { fill: #34d399; }
.isb-term-rows rect.is-warn { fill: #f59e0b; }

.isb-joy { transform-box: view-box; transform-origin: 549px 382px; transition: transform 0.5s ease-out; }
.isb-joy__stick { fill: #1e293b; }
.isb-joy__head { fill: #273548; stroke: #475569; stroke-width: 1.5; }
.isb-joy__btn { fill: #64748b; transition: fill 0.2s; }
.isb-joy__btn--alt { fill: #f59e0b; }
.isb-joy.is-press .isb-joy__btn:first-of-type { fill: #fbbf24; }

/* Подсветка зоны, выбранной на вкладке */
.isb-hl {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 3;
  stroke-dasharray: 9 6;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.isb-cab[data-active="engine"] .isb-hl[data-zone="engine"],
.isb-cab[data-active="screen"] .isb-hl[data-zone="screen"],
.isb-cab[data-active="operator"] .isb-hl[data-zone="operator"],
.isb-cab[data-active="state"] .isb-hl[data-zone="state"] {
  opacity: 1;
  animation: isb-march 0.9s linear infinite;
}

@keyframes isb-march {
  to { stroke-dashoffset: -30; }
}

/* Точки на рисунке кабины */
.isb-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: isb-pin 2.2s ease-out infinite;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.isb-pin:hover { transform: translate(-50%, -50%) scale(1.1); }

.isb-pin.is-active {
  background: var(--accent2);
  color: var(--on-accent2);
  animation: none;
  transform: translate(-50%, -50%) scale(1.12);
}

@keyframes isb-pin {
  0% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0); }
}

html:not(.isb-js) .isb-pin { display: none; }

/* Вкладки */
.isb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.isb-tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.isb-tab:hover { border-color: var(--accent); }

.isb-tab__n {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-light);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 800;
}

.isb-tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.isb-tab[aria-selected="true"] .isb-tab__n {
  background: var(--accent2);
  color: var(--on-accent2);
}

html:not(.isb-js) .isb-tabs { display: none; }

.isb-tabpanel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.isb-tabpanel + .isb-tabpanel { margin-top: 1rem; }
.isb-js .isb-tabpanel:not(.is-active) { display: none; }
.isb-js .isb-tabpanel.is-active { animation: isb-fade-in 0.35s ease-out; }

@keyframes isb-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.isb-tabpanel h3 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
}

/* Список параметров: имя слева, значение справа */
.isb-params {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.isb-params li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.95rem;
}

.isb-params li:last-child { border-bottom: 0; }
.isb-params__name { color: var(--muted); }

.isb-params__val {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.isb-params__val b {
  color: var(--text);
  font-weight: 700;
  transition: color 0.4s;
}

.isb-params__val b.is-tick { color: var(--accent); transition: none; }

.isb-params__val--note {
  white-space: normal;
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 0.88rem;
}

.isb-params--compact li { padding: 0.45rem 0; font-size: 0.92rem; }

@media (max-width: 480px) {
  .isb-params li { flex-wrap: wrap; gap: 0.15rem 1rem; }
  .isb-params__val { white-space: normal; }
}

.isb-state { font-weight: 700; }

.isb-params .isb-state {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--alt);
  color: var(--muted);
}

.isb-params .isb-state.is-on {
  background: var(--isb-ok-bg);
  color: var(--isb-ok);
}

.isb-compass {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  position: relative;
  display: inline-block;
}

.isb-compass i {
  position: absolute;
  inset: 0;
  transition: transform 0.6s;
}

.isb-compass i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 8px solid var(--accent2);
  transform: translateX(-50%);
}

.isb-level {
  width: 3.4rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--alt);
  border: 1px solid var(--line);
  overflow: hidden;
  display: inline-block;
}

.isb-level i {
  display: block;
  height: 100%;
  width: var(--v);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.6s;
}

/* Действия оператора: ось джойстика, кнопки, журнал */
.isb-ops {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem 1.1rem;
  margin-bottom: 1rem;
}

.isb-axis {
  grid-row: span 2;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.isb-axis__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.isb-axis__track {
  position: relative;
  width: 1.1rem;
  height: 7.5rem;
  border-radius: 999px;
  background: var(--alt);
  border: 1px solid var(--line);
  overflow: hidden;
}

.isb-axis__track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--muted);
  opacity: 0.6;
}

.isb-axis__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  background: var(--accent2);
  transition: top 0.4s, height 0.4s;
}

.isb-axis__ends {
  display: grid;
  gap: 0;
  text-align: center;
  line-height: 1.2;
}

.isb-btns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  align-self: start;
}

.isb-btns span {
  height: 2rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: var(--alt);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}

.isb-btns span.is-on {
  background: var(--accent2);
  border-color: var(--accent2);
  color: var(--on-accent2);
  transform: scale(0.92);
}

.isb-log {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.75rem;
  background: #0b1220;
  border-radius: 0.6rem;
  font: 0.78rem/1.45 ui-monospace, Consolas, 'Courier New', monospace;
  color: #94a3b8;
  min-height: 4.9rem;
  overflow: hidden;
}

.isb-log time { color: #fbbf24; margin-right: 0.45rem; }
.isb-log li:first-child { color: #e2e8f0; }
.isb-log li.is-new { animation: isb-log-in 0.4s ease-out; }

@keyframes isb-log-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Состояния: адаптивная запись и передача по событию.
   Лента времени едет влево: редкие точки записи, пока ничего не меняется,
   чаще — вокруг смены состояния; смена состояния — событие, уходит сразу. */
.isb-states { margin-bottom: 0.9rem; }

.isb-evt {
  display: block;
  width: 100%;
  height: auto;
  background: var(--alt);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}

.isb-evt__guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.isb-evt__line { fill: none; stroke: var(--isb-ok); stroke-width: 2.5; stroke-linejoin: round; }
.isb-evt__rec { fill: var(--accent); }
.isb-evt__ev { fill: var(--accent2); stroke: var(--alt); stroke-width: 2; }
.isb-evt__send { fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.isb-evt__lbl {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  paint-order: stroke;
  stroke: var(--alt);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.isb-evt__move { animation: isb-evt 12s linear infinite; }

@keyframes isb-evt {
  to { transform: translateX(-360px); }
}

.isb-states .isb-legend-line { margin-top: 0.45rem; }
.isb-states .isb-legend-line { column-gap: 1rem; }
.isb-legend-pair { white-space: nowrap; }
.isb-legend-pair .isb-key { margin: 0 0.35rem 0 0; vertical-align: -1px; }
.isb-key--rec { background: var(--accent); width: 0.6rem; height: 0.6rem; }
.isb-key--evt { background: var(--accent2); }

.isb-states__cap {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

.isb-states__cap b { color: var(--text); }

@media (max-width: 900px) {
  .isb-cab { grid-template-columns: 1fr; }
  .isb-cab__view { max-width: 640px; width: 100%; margin: 0 auto; }
}

@media (max-width: 560px) {
  .isb-pin { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
  .isb-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .isb-tab { font-size: 0.82rem; line-height: 1.2; border-radius: 0.8rem; text-align: left; }
  .isb-tab__n { flex: none; }
}

/* ---------- Виды техники ---------- */
.isb-mtable th[scope="row"] {
  width: 38%;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.isb-mtable__ico { margin-right: 0.45rem; }

@media (max-width: 560px) {
  .isb-mtable th[scope="row"] { white-space: normal; }
}

.isb-impl-block {
  margin-top: 2.6rem;
  scroll-margin-top: 5.5rem;
}

.isb-impl-block h3 {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.isb-impl-block__lead {
  color: var(--muted);
  max-width: 72ch;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

.isb-seeder,
.isb-sprayer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.5rem;
  align-items: start;
}

.isb-seeder__vis,
.isb-sprayer__vis {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem;
}

.isb-seeder__svg,
.isb-sprayer__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
}

.isb-seeder__svg { cursor: pointer; }

/* Сеялка: семена, пропуски, двойники */
.isb-seed ellipse { fill: var(--isb-seedc); stroke: rgba(0, 0, 0, 0.28); stroke-width: 1; }
.isb-mark-skip { fill: none; stroke: var(--accent2); stroke-width: 2.5; stroke-dasharray: 4 3; }
.isb-mark-double { fill: none; stroke: var(--isb-double); stroke-width: 2.5; }
.isb-lane-sep { stroke: var(--isb-furrow); stroke-width: 1.5; }
.isb-lane-furrow { stroke: var(--isb-furrow-dark); stroke-width: 7; stroke-linecap: round; opacity: 0.55; }
.isb-lane-hl { fill: var(--accent); opacity: 0.18; transition: transform 0.3s; }
.isb-sunits rect { fill: var(--isb-impl); stroke: var(--isb-impl-lid); stroke-width: 2; }

.isb-rows,
.isb-sections {
  display: grid;
  margin-top: 0.45rem;
}

.isb-rows { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* Штанга занимает 20…620 из 640 по ширине рисунка — кнопки секций встают под свои секции */
.isb-sections {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  padding: 0 3.125%;
}

.isb-rows button,
.isb-sections button {
  margin: 0 2px;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--alt);
  border-radius: 0.5rem;
  padding: 0.4rem 0;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.isb-rows button:hover,
.isb-sections button:hover { border-color: var(--accent); }

.isb-rows button.is-warn { color: var(--accent2-strong); border-color: var(--accent2); }

.isb-rows button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.isb-rows button.is-warn[aria-pressed="true"] {
  background: var(--accent2);
  border-color: var(--accent2);
  color: var(--on-accent2);
}

.isb-sections button[aria-pressed="true"] {
  background: var(--isb-wet);
  border-color: var(--isb-wet);
  color: #fff;
}

.isb-sections button[aria-pressed="false"] { text-decoration: line-through; }

html:not(.isb-js) .isb-rows,
html:not(.isb-js) .isb-sections { display: none; }

.isb-legend-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  margin: 0.65rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.isb-key {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  margin-left: 0.6rem;
}

.isb-key:first-child { margin-left: 0; }
.isb-key--seed { background: var(--isb-seedc); border-radius: 45%; transform: scaleX(0.8); }
.isb-key--skip { border: 2px dashed var(--accent2); }
.isb-key--double { border: 2px solid var(--isb-double); }
.isb-key--wet { background: var(--isb-wet); border-radius: 0.2rem; }
.isb-key--soil { background: var(--isb-soil); border: 1px solid var(--isb-bound); border-radius: 0.2rem; }

/* Карточка выбранного рядка */
.isb-rowcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transition: border-color 0.3s;
}

.isb-rowcard.is-warn { border-left-color: var(--accent2); }

.isb-rowcard__title {
  margin: 0 0 0.55rem;
  font-weight: 700;
}

.isb-rowcard dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  margin: 0;
}

.isb-rowcard dt { font-size: 0.8rem; color: var(--muted); }

.isb-rowcard dd {
  margin: 0.1rem 0 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.isb-rowcard dd b { font-size: 1.3rem; color: var(--text); }
.isb-rowcard.is-warn [data-rc="skip"] { color: var(--accent2-strong); }

.isb-rowcard__note {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Цель и факт: полоса факта и черта цели */
.isb-bullets {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.isb-sprayer__data .isb-bullets { margin-top: 0; margin-bottom: 0.8rem; }

.isb-bullet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.8rem;
  align-items: baseline;
}

.isb-bullet__name { font-size: 0.92rem; color: var(--muted); }
.isb-bullet__nums { font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.isb-bullet__nums b { color: var(--text); }

.isb-bullet__bar {
  grid-column: 1 / -1;
  position: relative;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--alt);
  border: 1px solid var(--line);
}

.isb-bullet__bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--act);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.6s;
}

.isb-bullet__bar s {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--tgt);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--text);
}

.isb-kpis {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.isb-kpis li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.65rem 0.75rem;
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.isb-kpis b { font-size: 1.2rem; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.isb-kpis span { font-size: 0.78rem; color: var(--muted); line-height: 1.3; }

/* Опрыскиватель */
.isb-wet { fill: var(--isb-wet); opacity: 0.85; }
.isb-tank-cap { fill: var(--accent2-strong); }
.isb-boom-sep { stroke: var(--isb-tyre); stroke-width: 2.5; }

.isb-fan {
  fill: var(--isb-wet);
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: isb-fan 0.8s ease-in-out infinite alternate;
}

@keyframes isb-fan {
  from { transform: scaleX(0.82); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 0.7; }
}

@media (max-width: 900px) {
  .isb-seeder,
  .isb-sprayer { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .isb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .isb-rows button,
  .isb-sections button { margin: 0 1px; font-size: 0.75rem; }
}

/* ---------- Сезон ---------- */
.isb-season { margin-top: 1.4rem; --pos: 25%; }
.isb-season[data-stage="2"] { --pos: 58%; }
.isb-season[data-stage="3"] { --pos: 84%; }

.isb-season__track {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 0.6rem;
}

.isb-season__months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.isb-season__bar {
  position: relative;
  height: 0.8rem;
  border-radius: 999px;
  margin: 0.45rem 0 0.9rem;
  background: var(--isb-season);
}

.isb-season__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--pos);
  border-radius: 0 999px 999px 0;
  background: var(--card);
  opacity: 0.7;
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.isb-season__runner {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -58%) scaleX(-1);
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.isb-js) .isb-season__bar,
html:not(.isb-js) .isb-season__months { display: none; }

.isb-season__tabs {
  display: grid;
  grid-template-columns: 3fr 1.3fr 2fr;
  gap: 0.6rem;
}

.isb-stage-tab {
  text-align: left;
  border: 0;
  border-top: 3px solid var(--line);
  background: none;
  padding: 0.6rem 0.2rem 0.4rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 0.1rem;
  transition: border-color var(--transition), color var(--transition);
}

.isb-stage-tab span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.isb-stage-tab:hover { color: var(--text); }

.isb-stage-tab[aria-selected="true"] {
  border-top-color: var(--accent2);
  color: var(--text);
}

html:not(.isb-js) .isb-season__track { display: none; }

.isb-stage {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-top: 1rem;
}

.isb-js .isb-stage:not(.is-active) { display: none; }
.isb-js .isb-stage.is-active { animation: isb-fade-in 0.45s ease-out; }

.isb-stage__art {
  width: 100%;
  height: auto;
}

.isb-stage h3 { margin: 0 0 0.4rem; }
.isb-stage .checks { margin-top: 0.4rem; line-height: 1.5; }

.isb-shed { fill: var(--alt); stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; }
.isb-shed-door { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.isb-snow text { fill: var(--accent); font-size: 18px; animation: isb-snow 3s ease-in-out infinite; }
.isb-snow text:nth-child(2) { animation-delay: 0.7s; }
.isb-snow text:nth-child(3) { animation-delay: 1.4s; }
.isb-snow text:nth-child(4) { animation-delay: 2.1s; }

@keyframes isb-snow {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}

.isb-rec-dot { fill: #ef4444; animation: isb-blink 1s steps(2, start) infinite; }

@keyframes isb-blink {
  to { visibility: hidden; }
}

.isb-ok { fill: var(--isb-ok); }
.isb-art-note { fill: var(--muted); font-size: 18px; font-weight: 800; }
.isb-crop { fill: none; stroke: var(--isb-sown-dot); stroke-width: 4; stroke-dasharray: 2 6; stroke-linecap: round; }

/* Копирование конфигурации на однотипные машины */
.isb-js .isb-copy__item { opacity: 0.2; }

.isb-season[data-stage="2"] .isb-copy__item {
  animation: isb-copy 0.45s ease-out forwards;
  animation-delay: calc(0.45s + var(--i) * 0.4s);
}

@keyframes isb-copy {
  to { opacity: 1; }
}

@media (max-width: 700px) {
  .isb-season__tabs { grid-template-columns: 1fr; gap: 0; }
  .isb-stage-tab { border-top: 0; border-left: 3px solid var(--line); padding: 0.45rem 0.7rem; }
  .isb-stage-tab[aria-selected="true"] { border-left-color: var(--accent2); }
  .isb-stage { grid-template-columns: 1fr; gap: 0.8rem; }
  .isb-stage__art { max-width: 240px; }
}

.isb-note {
  margin: 1.2rem 0 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  line-height: 1.6;
}

.isb-note p { margin: 0; }

/* ---------- Протоколы ---------- */
.isb-flow {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: flex;
  align-items: stretch;
}

.isb-flow__node {
  flex: 1 1 0;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 0.7rem;
  display: grid;
  gap: 0.2rem;
  align-content: start;
  justify-items: center;
  text-align: center;
}

.isb-flow__node b { font-size: 0.95rem; line-height: 1.3; }
.isb-flow__node > span:not(.isb-flow__ico) { font-size: 0.8rem; color: var(--muted); }
.isb-flow__ico { font-size: 1.6rem; line-height: 1.2; }

.isb-flow__node--accent {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.isb-flow__link {
  flex: 0 0 2.6rem;
  position: relative;
  display: grid;
  place-items: center;
}

.isb-flow__link--proto { flex-basis: 9rem; }

.isb-flow__link > span {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
  background-size: 12px 4px;
  animation: isb-flow-x 0.7s linear infinite;
}

@keyframes isb-flow-x {
  to { background-position: 12px 0; }
}

@keyframes isb-flow-y {
  to { background-position: 0 12px; }
}

.isb-flow__link em {
  position: relative;
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  background: var(--accent2);
  color: var(--on-accent2);
  border-radius: 0.6rem;
  padding: 0.2rem 0.55rem;
  transform: translateY(-1.5rem);
  animation: isb-fade-in 0.35s ease-out;
}

.isb-flow__link em.isb-flow__api {
  background: var(--accent-light);
  color: var(--accent-strong);
}

.isb-js .isb-proto[data-active="wialon"] [data-proto-show="agtp"],
.isb-js .isb-proto[data-active="agtp"] [data-proto-show="wialon"] { display: none; }

.isb-proto__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.isb-proto-card { transition: opacity 0.35s, border-color 0.35s, box-shadow 0.35s, transform var(--transition); }
.isb-proto-card .checks { line-height: 1.5; }
.isb-proto-card p { margin-top: 0.8rem; }

.isb-proto[data-active="wialon"] [data-proto-card="wialon"],
.isb-proto[data-active="agtp"] [data-proto-card="agtp"] {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px var(--accent2-light);
}

.isb-js .isb-proto[data-active="wialon"] [data-proto-card="agtp"],
.isb-js .isb-proto[data-active="agtp"] [data-proto-card="wialon"] { opacity: 0.62; }

@media (max-width: 900px) {
  .isb-proto__cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .isb-flow { flex-direction: column; }
  .isb-flow__link,
  .isb-flow__link--proto { flex-basis: 2.8rem; }

  .isb-flow__link > span {
    left: 50%;
    right: auto;
    top: 3px;
    bottom: 3px;
    width: 4px;
    height: auto;
    margin: 0 0 0 -2px;
    background-image: linear-gradient(180deg, var(--accent) 50%, transparent 50%);
    background-size: 4px 12px;
    animation-name: isb-flow-y;
  }

  .isb-flow__node {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    column-gap: 0.8rem;
    padding: 0.7rem 0.9rem;
  }

  .isb-flow__ico { grid-row: span 3; align-self: center; }

  .isb-flow__link em {
    position: absolute;
    left: calc(50% + 0.8rem);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }
}

/* ---------- Тестовая запись ---------- */
.isb-rec {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 1.4rem 0 0.4rem;
}

.isb-rec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}

.isb-rec__clock {
  margin: 0;
  font: 700 1.35rem ui-monospace, Consolas, 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.isb-rec__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--line);
}

.isb-rec.is-playing .isb-rec__dot {
  background: #ef4444;
  animation: isb-live-red 1.2s ease-out infinite;
}

@keyframes isb-live-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
}

.isb-rec__status {
  margin: 0;
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.45;
}

.isb-rec__status b { color: var(--text); }

.isb-rec__bar {
  position: relative;
  display: flex;
  gap: 3px;
  margin-top: 1rem;
  height: 2.6rem;
}

.isb-rec__bar span {
  flex: var(--w) 1 0;
  min-width: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 0.45rem;
  background: var(--alt);
  border: 1px solid var(--line);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

.isb-rec__bar span.is-done { background: var(--accent-light); border-color: var(--accent); }
.isb-rec__bar span.is-active { background: var(--accent2-light); border-color: var(--accent2); }

.isb-rec__cursor {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #ef4444;
  opacity: 0;
  pointer-events: none;
}

.isb-rec.is-started .isb-rec__cursor { opacity: 1; }

.isb-rec__map { margin-top: 1rem; }

.isb-rec__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.isb-rec__legend span:first-child { font-weight: 600; margin-right: auto; }

.isb-rec__legend i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: -1px;
}

.isb-rec__legend i.is-new { background: var(--accent2); }
.isb-rec__legend i.is-on { background: var(--accent); }

.isb-rec__grid {
  display: grid;
  grid-template-columns: repeat(50, minmax(0, 1fr));
  gap: 3px;
}

@media (max-width: 700px) {
  .isb-rec__grid { grid-template-columns: repeat(25, minmax(0, 1fr)); }
}

.isb-rec__grid i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--alt);
  border: 1px solid var(--line);
  transition: background 0.3s, border-color 0.3s;
}

.isb-rec__grid i.is-new { background: var(--accent2); border-color: var(--accent2); }
.isb-rec__grid i.is-on { background: var(--accent); border-color: var(--accent); }

html:not(.isb-js) .isb-rec { display: none; }

.isb-rtable .isb-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.isb-rtable tr.is-active td { background: var(--accent2-light); }
.isb-rtable tr.is-done td:first-child::before { content: '\2713\00a0'; color: var(--accent); font-weight: 700; }

.isb-cta-inline {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 0 0 4px var(--accent-light);
}

.isb-cta-inline p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.55;
}

/* ---------- Почему мы ---------- */
.isb-why__big {
  margin: 0 0 0.25rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.isb-why h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }

.isb-more {
  margin: 1.4rem 0 0;
  color: var(--muted);
  line-height: 1.65;
}

/* ---------- Вопросы и ответы ---------- */
.isb-faq {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.2rem;
  max-width: 860px;
}

.isb-faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  transition: border-color var(--transition);
}

.isb-faq details[open] { border-color: var(--accent); }

.isb-faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.isb-faq summary::-webkit-details-marker { display: none; }

.isb-faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
}

.isb-faq details[open] summary::after { content: '\2212'; }

.isb-faq details p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0.6rem 0 0;
}

/* ---------- Заявка ---------- */
.isb-final {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2rem;
  align-items: center;
}

.isb-final p { color: rgba(255, 255, 255, 0.86); line-height: 1.6; max-width: 60ch; }

.isb-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.section--cta .isb-btn-max {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.section--cta .isb-btn-max:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-1px);
}

.isb-final__mail { font-size: 0.9rem; }

.isb-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.isb-contacts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "role role" "phone name";
  gap: 0.15rem 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
}

.isb-contacts span {
  grid-area: role;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.section--cta .isb-contacts a {
  grid-area: phone;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

.section--cta .isb-contacts a:hover { color: var(--accent2); }

.isb-contacts small {
  grid-area: name;
  align-self: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 820px) {
  .isb-final { grid-template-columns: 1fr; }
}

/* ---------- Засорился сошник: реакция механизатора ----------
   Блок идёт сразу за кабиной на том же фоне — без лишней линии между ними. */
.section--alt:has(+ .isb-inc-sec) { border-bottom: 0; }
.isb-inc-sec { border-top: 0; padding-top: 1rem; }

.isb-inc { margin-top: 1.3rem; }

.isb-inc__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.isb-inc__replay {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.isb-inc__replay:hover { border-color: var(--accent); color: var(--accent); }
html:not(.isb-js) .isb-inc__replay { display: none; }

.isb-inc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 1.3rem;
  margin-top: 1rem;
  align-items: start;
}

.isb-inc__vis {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem;
}

.isb-inc__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
}

.isb-inc-guide { stroke: var(--isb-furrow-dark); stroke-width: 2; opacity: 0.5; }
.isb-inc-seed { fill: var(--isb-seedc); stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.8; }
.isb-inc-skip { fill: none; stroke: var(--accent2); stroke-width: 1.6; stroke-dasharray: 2.5 1.8; }
.isb-inc-rowlbl text { fill: var(--muted); font-size: 11px; font-weight: 700; }
.isb-inc-rowlbl text.is-warn { fill: var(--accent2-strong); }
.isb-inc-br { fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; }

.isb-inc-brlbl {
  fill: var(--accent2-strong);
  font-size: 13px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--isb-soil);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.isb-inc-alarm path { fill: var(--accent2); stroke: var(--isb-soil); stroke-width: 2; stroke-linejoin: round; }
.isb-inc-alarm text { fill: var(--on-accent2); font-size: 12px; font-weight: 800; }
.isb-inc-stopline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.isb-inc-stop rect { fill: var(--accent); }
.isb-inc-stop text { fill: var(--on-accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.isb-inc-units { stroke: var(--isb-impl-lid); stroke-width: 3; stroke-linecap: round; }
.isb-inc-unit { fill: var(--isb-impl-lid); transition: fill 0.3s; }
.isb-inc-unit.is-clog { fill: var(--accent2); }
[data-inc-tractor] .isb-impl,
[data-inc-tractor] .isb-inc-units { transition: opacity 0.3s; }
[data-inc-tractor].is-raised .isb-impl,
[data-inc-tractor].is-raised .isb-inc-units { opacity: 0.4; }

.isb-key--alarm {
  border-radius: 0;
  background: var(--accent2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Лента событий */
.isb-inc__case h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.isb-js .isb-inc__case:not(.is-active) { display: none; }
html:not(.isb-js) .isb-inc__case + .isb-inc__case { margin-top: 1.5rem; }

.isb-inc__log {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 0.55rem;
}

.isb-inc__log li {
  position: relative;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
}

.isb-inc__log li::before {
  content: '';
  position: absolute;
  left: calc(-1.1rem - 6px);
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px var(--alt);
}

.isb-inc__log li.is-alarm::before { background: var(--accent2); }
.isb-inc__log li.is-stop::before { background: var(--accent); }
.isb-inc__log li.is-ok::before { background: var(--isb-ok); }
.isb-inc__log li.is-bad::before { background: var(--isb-bad); }
.isb-inc__log li.is-bad { color: var(--isb-bad); font-weight: 600; }

.isb-inc__log time {
  display: block;
  font: 600 0.76rem ui-monospace, Consolas, 'Courier New', monospace;
  color: var(--muted);
}

.isb-js .isb-inc__log li:not(.is-shown) {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
}

.isb-inc__result {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}

.isb-inc__result b { font-size: 1rem; }
.isb-inc__result span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.isb-inc__result.is-bad { border-left-color: var(--isb-bad); }
.isb-inc__result.is-good { border-left-color: var(--isb-ok); }

.isb-js .isb-inc__result:not(.is-shown) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.isb-inc__how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.3rem;
  margin-top: 1.3rem;
  align-items: start;
}

.isb-inc__how .isb-note { margin: 0; }
.isb-inc__how h3 { margin: 0 0 0.3rem; font-size: 1.02rem; }
.isb-inc__how .checks { margin-top: 0.4rem; line-height: 1.5; }

.isb-panel-more {
  margin: 0.9rem 0 0;
  font-weight: 600;
}

.isb-panel-more a { text-decoration: none; }

@media (max-width: 900px) {
  .isb-inc__grid,
  .isb-inc__how { grid-template-columns: 1fr; }
}

/* На телефоне переключатели в несколько строк — не «пилюля», а скруглённая плашка */
@media (max-width: 560px) {
  .isb-seg { border-radius: 1rem; }
  .isb-seg__btn { border-radius: 0.75rem; }

  .isb-inc .isb-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .isb-inc .isb-seg__btn {
    padding: 0.5rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .isb-inc__vis { padding: 0.45rem; }
}

/* ---------- Засорился сошник: экран в кабине и график ---------- */
.isb-inc__panels {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 0.7rem;
  margin-top: 0.7rem;
  align-items: start;
}

html:not(.isb-js) .isb-inc__panels { display: none; }

.isb-inc__panel {
  margin: 0;
  background: var(--alt);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.5rem 0.55rem 0.55rem;
}

.isb-inc__panel figcaption {
  margin: 0 0 0.35rem 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.isb-inc__panel svg { display: block; width: 100%; height: auto; }
.isb-ch-legend { margin-top: 0.35rem; font-size: 0.76rem; }

/* поле: засор, механизатор, участок для подсева */
.isb-inc-ring {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: isb-ring 1.2s ease-out infinite;
}

@keyframes isb-ring {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(1.9); opacity: 0; }
}

.isb-inc-blob { fill: #7a5536; stroke: #4a3220; stroke-width: 1; }
[data-theme="dark"] .isb-inc-blob { fill: #a77a52; stroke: #6b4a2e; }

.isb-inc-dirt circle {
  fill: #8b6a48;
  opacity: 0;
  transform-box: fill-box;
}

.is-cleaning .isb-inc-dirt circle { animation: isb-dirt 0.7s ease-out infinite; }
.is-cleaning .isb-inc-dirt circle:nth-child(2) { animation-delay: 0.18s; }
.is-cleaning .isb-inc-dirt circle:nth-child(3) { animation-delay: 0.36s; }
.is-cleaning .isb-inc-dirt circle:nth-child(4) { animation-delay: 0.52s; }

@keyframes isb-dirt {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(-12px, -6px); }
}

.isb-inc-person__body { fill: #2563eb; stroke: #1e3a8a; stroke-width: 1; }
.isb-inc-person__head { fill: #f2c9a0; stroke: #b8875e; stroke-width: 1; }

.isb-inc-wrench {
  display: none;
  font-size: 12px;
  transform-box: fill-box;
  transform-origin: 70% 70%;
}

.isb-inc-person.is-cleaning .isb-inc-wrench {
  display: inline;
  animation: isb-wrench 0.45s ease-in-out infinite alternate;
}

@keyframes isb-wrench {
  from { transform: rotate(-25deg); }
  to { transform: rotate(25deg); }
}

.isb-inc-skiphl {
  fill: none;
  stroke: var(--isb-bad);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  animation: isb-skiphl 1.4s ease-in-out infinite;
}

@keyframes isb-skiphl {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* экран в кабине */
.isb-term-bar { fill: #34d399; }
.isb-term-bar.is-bad { fill: #ef4444; }
.isb-term-bar.is-off { fill: #475569; }
.isb-term-lbl text { fill: #94a3b8; font: 9px ui-monospace, Consolas, monospace; }
.isb-term-mode.is-pause { fill: #fbbf24; }
.isb-term-alarm { animation: isb-alarm-blink 0.9s ease-in-out infinite; }

@keyframes isb-alarm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

.isb-term-alarm__box { fill: #3b1d06; stroke: #f59e0b; stroke-width: 2; }
.isb-term-alarm__title { fill: #fbbf24; font: 700 13px ui-monospace, Consolas, monospace; }
.isb-term-alarm__sub { fill: #fde68a; font: 10px ui-monospace, Consolas, monospace; }
.isb-term-ok rect { fill: #f59e0b; transition: fill 0.15s; }
.isb-term-ok text { fill: #1a1a1a; font: 700 11px ui-monospace, Consolas, monospace; }
.isb-term-ok.is-press rect { fill: #fde68a; }

.isb-term-tap {
  fill: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.isb-term-tap.is-on { animation: isb-tap 0.7s ease-out; }

@keyframes isb-tap {
  0% { opacity: 0.95; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* график в мониторинге */
.isb-ch-axis { stroke: var(--line); stroke-width: 1; }
.isb-ch-lbl {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  paint-order: stroke;
  stroke: var(--alt);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.isb-ch-speed { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.isb-ch-row { fill: none; stroke: var(--isb-ok); stroke-width: 2.2; stroke-linejoin: round; }
.isb-ch-bad { fill: none; stroke: var(--isb-bad); stroke-width: 5; stroke-linecap: round; opacity: 0.85; }
.isb-ch-stand { fill: var(--accent-light); }
.isb-ch-standlbl { fill: var(--accent-strong); font-size: 10px; font-weight: 700; }
.isb-ch-head { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3 3; }
.isb-ch-time { fill: var(--muted); font: 9px ui-monospace, Consolas, monospace; }
.isb-ch-ev--alarm { fill: var(--accent2); }
.isb-ch-ev--ack { fill: var(--muted); }
.isb-ch-ev--stop { fill: var(--accent); stroke: var(--alt); stroke-width: 1.5; }
.isb-ch-ev--go { fill: var(--isb-ok); stroke: var(--alt); stroke-width: 1.5; }

.isb-key--ack { background: var(--muted); }
.isb-key--stop { background: var(--accent); border-radius: 2px; }
.isb-key--go { background: var(--isb-ok); border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }

@media (max-width: 640px) {
  .isb-inc__panels { grid-template-columns: 1fr; }
  .isb-inc__panel:first-child svg { max-width: 260px; margin: 0 auto; }
}

/* ---------- Без анимаций по просьбе системы ---------- */
@media (prefers-reduced-motion: reduce) {
  .dg-flow,
  .isb-live__dot,
  .isb-ping,
  .isb-chip,
  .isb-wave,
  .isb-wave--on,
  .isb-persp--move,
  .isb-pin,
  .isb-hl,
  .isb-evt__move,
  .isb-inc-ring,
  .isb-inc-skiphl,
  .isb-term-alarm,
  .is-cleaning .isb-inc-dirt circle,
  .isb-inc-person.is-cleaning .isb-inc-wrench,
  .isb-fan,
  .isb-snow text,
  .isb-rec-dot,
  .isb-flow__link > span,
  .isb-mark,
  .isb-compare[data-hint] .isb-seg__btn[data-compare-set="after"],
  .isb-arch.is-auto .isb-step[aria-pressed="true"]::after {
    animation: none !important;
  }

  .dg-pulse { display: none !important; }
  .isb-ping { opacity: 0; }
  .isb-js .isb-copy__item { opacity: 1; }
}
