/* Страница решения «СКВДУ: контроль выгрузки и движения урожая» (solution-skvdu.html).
   Подключается только на ней, общий styles.css не меняет. Цвета схем —
   переменные темы; тренажёр дисплея тёмный в обеих темах, как настоящий
   дисплей СКВДУ. Интерактив — solution-skvdu.js. Без скрипта (нет класса
   .skv-js на <html>) всё содержимое видно сразу. Общие блоки собраны из
   шаблона skv_build.py. */

:root,
[data-theme="light"] {
  --skv-ok: #15803d;
  --skv-steel: #5b6b7d;
  --skv-body: #3f8f4f;
  --skv-body2: #e7b43a;
  --skv-truck: #d9534f;
  --skv-box: #9aa7b6;
  --skv-grain: #d89b16;
  --skv-field: rgba(63, 143, 79, 0.16);
  --skv-field-line: #3f8f4f;
  --skv-geo-bg: #eef3ea;
}

[data-theme="dark"] {
  --skv-ok: #4ade80;
  --skv-steel: #7a8899;
  --skv-body: #3c8a4b;
  --skv-body2: #c99a2c;
  --skv-truck: #c0504b;
  --skv-box: #66768a;
  --skv-grain: #f0b429;
  --skv-field: rgba(74, 222, 128, 0.12);
  --skv-field-line: #4ade80;
  --skv-geo-bg: #17212b;
}

/* ---------- Первый экран ---------- */
.skv-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.2rem; align-items: center; }
.skv-hero h1 { font-size: clamp(1.75rem, 3.3vw, 2.55rem); line-height: 1.15; margin: 0 0 1rem; }
.skv-hero__lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 60ch; margin: 0 0 1.4rem; }
.skv-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.skv-badges { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.skv-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; }

.skv-live { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-lg); overflow: hidden; }
.skv-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); }
.skv-live__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.skv-live__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #22c55e; animation: skv-live 1.8s ease-out infinite; }
.skv-live figcaption { font-size: 0.78rem; color: var(--muted); padding: 0.5rem 0.9rem; border-top: 1px solid var(--line); }

@keyframes skv-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); }
}

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

/* ---------- Переключатели и вкладки ---------- */
.skv-seg,
.skv-tabs { 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); }
.skv-tabs { margin-top: 1.2rem; border-radius: 1.2rem; }
.skv-seg__btn,
.skv-tab { border: 0; background: transparent; padding: 0.55rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition); }
.skv-seg__btn:hover,
.skv-tab:hover { color: var(--text); }
.skv-seg__btn[aria-pressed="true"],
.skv-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--on-accent); box-shadow: var(--shadow-md); }
html:not(.skv-js) .skv-seg,
html:not(.skv-js) .skv-tabs { display: none; }

@media (max-width: 560px) {
  .skv-seg,
  .skv-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 1rem; }
  .skv-seg__btn,
  .skv-tab { border-radius: 0.75rem; padding: 0.5rem 0.35rem; font-size: 0.8rem; line-height: 1.2; }
}

.skv-panel { margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem; }
.skv-js .skv-panel:not(.is-active) { display: none; }
html:not(.skv-js) .skv-panel + .skv-panel { margin-top: 1rem; }
.skv-panel.is-active { animation: skv-panel 0.35s ease-out; }

@keyframes skv-panel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.skv-panel h3 { margin: 0 0 0.8rem; font-size: 1.12rem; }
.skv-panel h4 { margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.skv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.skv-list li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.skv-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--skv-ok); }
.skv-list.is-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.4rem; }
.skv-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; padding-left: 0.9rem; border-left: 3px solid var(--accent2); max-width: 80ch; }
.skv-more { margin: 1.2rem 0 0; color: var(--muted); line-height: 1.6; }

@media (max-width: 720px) {
  .skv-list.is-cols { grid-template-columns: 1fr; }
}

/* ---------- Сравнение ---------- */
.skv-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; }
.skv-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; }
.skv-cmp__ico { display: block; font-size: 1.6rem; line-height: 1; }
.skv-cmp h3 { margin: 0.55rem 0 0.6rem; font-size: 1.02rem; padding-right: 1.8rem; }
.skv-cmp p { margin: 0; line-height: 1.5; font-size: 0.94rem; }
.skv-cmp__tag { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.25rem; }
.skv-cmp__before { color: var(--muted); }
.skv-cmp__after .skv-cmp__tag { color: var(--accent); }
.skv-cmp__after b { color: var(--accent-strong); }
html:not(.skv-js) .skv-cmp__after { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); }
.skv-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(.skv-js) .skv-cmp::after { display: none; }
.skv-js .skv-cmp { display: grid; grid-template-rows: auto auto 1fr; }
.skv-js .skv-cmp__before,
.skv-js .skv-cmp__after { grid-row: 3; grid-column: 1; transition: opacity 0.35s, transform 0.35s, visibility 0.35s; }
.skv-js .skv-compare[data-state="before"] .skv-cmp__after { opacity: 0; visibility: hidden; transform: translateY(8px); }
.skv-js .skv-compare[data-state="after"] .skv-cmp__before { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.skv-compare[data-state="after"] .skv-cmp { border-color: var(--accent); box-shadow: var(--shadow-md); }
.skv-compare[data-state="after"] .skv-cmp::after { content: '\2713'; color: #fff; background: var(--skv-ok); transform: rotate(360deg); }
.skv-compare[data-hint] .skv-seg__btn[data-compare-set="after"] { animation: skv-hint 2.2s ease-in-out infinite; }

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

/* ---------- Калькулятор потерь ---------- */
.skv-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 1.3rem; margin-top: 1.3rem; align-items: stretch; }
.skv-calc__in { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: grid; gap: 0.9rem; }
.skv-field { display: grid; gap: 0.3rem; }
.skv-field label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: 0.94rem; }
.skv-field output { font-variant-numeric: tabular-nums; color: var(--accent-strong); font-weight: 800; white-space: nowrap; }
.skv-field input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.skv-calc__out { background: #0b1220; color: #cbd5e1; border-radius: var(--radius); padding: 1.3rem 1.3rem 1.2rem; display: grid; gap: 0.9rem; align-content: start; }
.skv-calc__row { display: grid; gap: 0.15rem; padding-bottom: 0.8rem; border-bottom: 1px solid #1e293b; }
.skv-calc__row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.skv-calc__row span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.skv-calc__row b { font: 700 1.35rem ui-monospace, Consolas, 'Courier New', monospace; color: #fbbf24; font-variant-numeric: tabular-nums; }
.skv-calc__row.is-big b { font-size: 2rem; color: #f87171; }
.skv-calc__src { margin: 0; font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }
html:not(.skv-js) .skv-calc__in input { display: none; }

@media (max-width: 860px) {
  .skv-calc { grid-template-columns: 1fr; }
}

/* ---------- Вопросы ---------- */
.skv-faq { display: grid; gap: 0.6rem; margin-top: 1.2rem; max-width: 860px; }
.skv-faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem; transition: border-color var(--transition); }
.skv-faq details[open] { border-color: var(--accent); }
.skv-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.skv-faq summary::-webkit-details-marker { display: none; }
.skv-faq summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.skv-faq details[open] summary::after { content: '\2212'; }
.skv-faq details p { color: var(--muted); line-height: 1.6; margin: 0.6rem 0 0; }

/* ---------- Оборудование ---------- */
.skv-equip { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 1.2rem; }
.skv-photo { display: block; width: 100%; height: auto; aspect-ratio: 500 / 340; object-fit: contain; background: #fff; }
.skv-photo.is-cover { object-fit: cover; }
.skv-card-link { display: inline-block; margin-top: 0.7rem; font-weight: 600; text-decoration: none; }

/* ---------- Заявка ---------- */
.skv-final { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: center; }
.skv-final p { color: rgba(255, 255, 255, 0.86); line-height: 1.6; max-width: 60ch; }
.skv-final__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; }
.section--cta .skv-btn-max { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.section--cta .skv-btn-max:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: translateY(-1px); }
.skv-final__mail { font-size: 0.9rem; }
.skv-contacts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.skv-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; }
.skv-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 .skv-contacts a { grid-area: phone; font-size: 1.15rem; font-weight: 700; text-decoration: none; color: #fff; white-space: nowrap; }
.section--cta .skv-contacts a:hover { color: var(--accent2); }
.skv-contacts small { grid-area: name; align-self: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }

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


/* ---------- Первый экран: путь урожая ---------- */
.skv-chain { display: block; width: 100%; height: auto; }
.skv-srv rect { fill: var(--accent-light); stroke: var(--accent); stroke-width: 1.5; }
.skv-srv text { fill: var(--accent-strong); font: 700 14px system-ui, sans-serif; }
.skv-srv .skv-srv__sub { fill: var(--muted); font: 600 11px system-ui, sans-serif; }
.skv-link { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 5; transition: stroke 0.4s; }
.skv-ground { stroke: var(--line); stroke-width: 2; }
.skv-name { fill: var(--muted); font: 600 12px system-ui, sans-serif; }
.skv-m-body { fill: var(--skv-body); }
.skv-m-tank,
.skv-m-hopper { fill: var(--skv-body2); }
.skv-m-cab { fill: var(--card); stroke: var(--skv-steel); stroke-width: 2; }
.skv-m-box { fill: var(--skv-box); }
.skv-m-rib { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.skv-m-dark { fill: var(--skv-steel); }
.skv-m-line { stroke: var(--skv-steel); stroke-width: 3; }
.skv-m-reel { fill: none; stroke: var(--skv-steel); stroke-width: 3; }
.skv-glass { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.skv-scr { fill: #ffcc00; }
.skv-auger { fill: none; stroke: var(--skv-steel); stroke-width: 6; stroke-linecap: round; }
.skv-wheel { fill: #1f2937; }
.skv-rim { fill: #cbd5e1; }
.skv-rx { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.skv-tag { fill: var(--card); stroke: var(--accent); stroke-width: 2; transition: fill 0.4s, stroke 0.4s; }
.skv-tag__txt { fill: var(--accent-strong); font: 800 9px system-ui, sans-serif; transition: fill 0.4s; }
.skv-ping { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.skv-grain { fill: none; stroke: var(--skv-grain); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0; transition: opacity 0.3s; }
.skv-truck { transition: none; }
.skv-pkt { transition: transform 0.9s ease-in-out, opacity 0.6s; transform: translate(166px, 92px); }
.skv-pkt rect { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.16)); }
.skv-pkt text { fill: var(--text); font: 700 12px system-ui, sans-serif; }
.skv-pkt .skv-pkt__sub { fill: var(--muted); font: 600 10.5px system-ui, sans-serif; }
.skv-board { fill: #0b1220; stroke: var(--skv-steel); stroke-width: 2; }
.skv-board__txt { fill: #4ade80; font: 700 14px ui-monospace, Consolas, monospace; }

.skv-live[data-step="1"] .skv-grain.is-1,
.skv-live[data-step="2"] .skv-grain.is-2 { opacity: 1; animation: skv-flow 0.6s linear infinite; }
.skv-live[data-step="1"] .skv-ping.is-1,
.skv-live[data-step="2"] .skv-ping.is-2,
.skv-live[data-step="4"] .skv-ping.is-4 { animation: skv-ping 1.4s ease-out infinite; }
.skv-live[data-step="1"] [data-link="c"],
.skv-live[data-step="2"] [data-link="b"],
.skv-live[data-step="5"] [data-link="s"] { stroke: var(--accent); animation: skv-up 0.8s linear infinite; }
.skv-live[data-step="2"] .skv-tag.is-truck,
.skv-live[data-step="3"] .skv-tag.is-truck,
.skv-live[data-step="4"] .skv-tag.is-truck { fill: var(--accent); }
.skv-live[data-step="2"] .skv-tag__txt,
.skv-live[data-step="3"] .skv-tag__txt,
.skv-live[data-step="4"] .skv-tag__txt { fill: #fff; }
.skv-live[data-step="3"] .skv-truck,
.skv-live[data-step="4"] .skv-truck,
.skv-live[data-step="5"] .skv-truck { transform: translateX(148px); }
.skv-live[data-step="3"] .skv-truck { transition: transform 1.6s ease-in-out; }
.skv-live[data-step="2"] .skv-pkt { transform: translate(318px, 118px); }
.skv-live[data-step="3"] .skv-pkt,
.skv-live[data-step="4"] .skv-pkt { transform: translate(454px, 66px); }
.skv-live[data-step="5"] .skv-pkt { transform: translate(420px, 8px); opacity: 0.85; }
.skv-live[data-step="3"] .skv-name.is-truck,
.skv-live[data-step="4"] .skv-name.is-truck,
.skv-live[data-step="5"] .skv-name.is-truck { opacity: 0; }

@keyframes skv-flow { to { stroke-dashoffset: -11; } }
@keyframes skv-up { to { stroke-dashoffset: 10; } }
@keyframes skv-ping {
  0% { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.8); }
}

.skv-hsteps { list-style: none; margin: 0; padding: 0.5rem 0.6rem; display: grid; gap: 0.2rem; border-top: 1px solid var(--line); }
.skv-hsteps button { position: relative; overflow: hidden; width: 100%; display: flex; gap: 0.55rem; align-items: flex-start; text-align: left; font: inherit; font-size: 0.84rem; line-height: 1.4; color: var(--muted); background: transparent; border: 0; border-radius: 0.6rem; padding: 0.35rem 0.5rem; cursor: pointer; transition: background var(--transition), color var(--transition); }
.skv-hsteps button:hover { background: var(--alt); }
.skv-hsteps b { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; background: var(--alt); color: var(--muted); }
.skv-hsteps li.is-on button { color: var(--text); background: var(--accent-light); }
.skv-hsteps li.is-on b { background: var(--accent); color: var(--on-accent); }
.skv-hsteps button::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.skv-live.is-auto .skv-hsteps li.is-on button::after { animation: skv-progress var(--skv-step-ms, 3600ms) linear forwards; }
html:not(.skv-js) .skv-hsteps button { cursor: default; }

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

/* ---------- Состав по объектам ---------- */
.skv-obj { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 1.2rem; align-items: start; }
.skv-dev { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.skv-dev li { display: grid; gap: 0.25rem; padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--bg); }
.skv-dev b { font-size: 1rem; }
.skv-dev span { color: var(--muted); line-height: 1.5; font-size: 0.93rem; }
.skv-xchg { background: var(--alt); border-radius: 0.9rem; padding: 0.9rem 1rem; display: grid; gap: 0.6rem; }
.skv-xchg h4 { margin: 0; }
.skv-xchg p { margin: 0; line-height: 1.45; font-size: 0.92rem; color: var(--muted); }
.skv-xchg b { display: block; color: var(--text); }
.skv-xchg .is-up b { color: var(--accent-strong); }
.skv-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; padding-left: 0.9rem; border-left: 3px solid var(--accent2); max-width: 85ch; }

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

@media (max-width: 560px) {
  .skv-tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Дисплей СКВДУ ---------- */
.skv-sim { margin-top: 1.2rem; }
.skv-sim__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.3rem; margin-top: 1rem; align-items: start; }
.skv-disp { --y: #ffcc00; background: #1a1d21; color: #f1f5f9; border-radius: 0.9rem; border: 8px solid #2a2f36; box-shadow: var(--shadow-lg); font-family: "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif; overflow: hidden; }
.skv-disp__bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.9rem; padding: 0.25rem 0.7rem; font-size: 0.85rem; background: #101215; color: #e2e8f0; font-variant-numeric: tabular-nums; }
.skv-disp__ind { color: #f59e0b; letter-spacing: 0.1em; margin-right: auto; }
.skv-disp__body { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; min-height: 17.5rem; }
.skv-disp__main { padding: 0.6rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; }
.skv-disp__side { display: grid; grid-auto-rows: 1fr; gap: 0.35rem; padding: 0.4rem; border-left: 1px solid #2f353d; }
.skv-disp__side i { display: grid; place-items: center; font-style: normal; font-size: 1rem; border: 1px solid #3a414a; border-radius: 0.4rem; background: #22262c; filter: grayscale(1); }
.skv-disp__side i:first-child { background: var(--y); filter: none; }
.skv-box { border: 1px solid #6b7280; background: #2b2f35; border-radius: 0.35rem; padding: 0.35rem 0.6rem; }
.skv-box p { margin: 0.1rem 0; font-size: 1.05rem; display: flex; gap: 0.5rem; align-items: baseline; }
.skv-box small { margin-left: auto; font-size: 0.75rem; color: #94a3b8; border: 1px solid #4b5563; border-radius: 0.3rem; padding: 0 0.35rem; }
.skv-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: auto; }
.skv-btns.is-end { justify-content: flex-end; }
.skv-b { border: 0; border-radius: 0.4rem; padding: 0.7rem 1rem; font: inherit; font-size: 1.15rem; letter-spacing: 0.02em; color: #111; cursor: pointer; min-width: 7rem; transition: filter 0.2s, transform 0.1s; }
.skv-b:hover { filter: brightness(1.08); }
.skv-b:active { transform: translateY(1px); }
.skv-b:disabled { cursor: default; }
.skv-b.is-yellow { background: var(--y); }
.skv-b.is-green { background: #4ade80; }
.skv-b.is-red { background: #f87171; }
.skv-b.is-small { padding: 0.4rem 0.8rem; font-size: 0.95rem; min-width: 0; }
.skv-b.is-hint,
.skv-li.is-hint { animation: skv-hint 1.6s ease-in-out infinite; }

@keyframes skv-hint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255, 204, 0, 0); }
}

.skv-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; border: 1px solid #4b5563; }
.skv-tbl caption { font-size: 0.82rem; color: #cbd5e1; padding-bottom: 0.15rem; }
.skv-tbl td { border: 1px solid #3a414a; padding: 0.15rem 0.35rem; white-space: nowrap; }
.skv-tbl tr.is-th td { color: #94a3b8; }
.skv-title { margin: 0; text-align: center; font-size: 1.05rem; color: #e2e8f0; }
.skv-list { display: grid; gap: 0.35rem; }
.skv-li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; width: 100%; text-align: left; font: inherit; font-size: 1.1rem; color: #f1f5f9; background: transparent; border: 1px solid #b38f00; border-radius: 0.4rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.skv-li:hover { background: #2b2f35; }
.skv-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 1rem; }
.skv-sig i { width: 3px; background: #4b5563; border-radius: 1px; }
.skv-sig i:nth-child(1) { height: 30%; }
.skv-sig i:nth-child(2) { height: 55%; }
.skv-sig i:nth-child(3) { height: 80%; }
.skv-sig i:nth-child(4) { height: 100%; }
.skv-sig i.is-on { background: #4ade80; }
.skv-big { margin: 0; font-size: 1.45rem; line-height: 1.25; }
.skv-unl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.8rem; align-items: stretch; }
.skv-unl__bar { display: grid; gap: 0.35rem; text-align: center; font-size: 1rem; }
.skv-fill { position: relative; min-height: 6.5rem; border: 3px solid #f1f5f9; border-radius: 0.2rem; background: #111; overflow: hidden; }
.skv-fill i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--y); transition: height 0.25s linear; }
.skv-fill b { position: absolute; left: 0; right: 0; bottom: 0.35rem; color: #111; font-size: 1.15rem; mix-blend-mode: normal; }
.skv-unl__info { display: grid; gap: 0.2rem; align-content: start; font-size: 0.98rem; }
.skv-unl__info p { margin: 0; }
.skv-unl__info .skv-b { margin-top: 0.5rem; justify-self: stretch; }
.skv-modal { margin: auto 0; border: 1px solid #94a3b8; background: #2b2f35; border-radius: 0.5rem; padding: 0.9rem; text-align: center; display: grid; gap: 0.8rem; }
.skv-modal p { margin: 0; font-size: 1.15rem; }
.skv-ok { display: grid; gap: 0.35rem; font-size: 0.98rem; line-height: 1.4; }
.skv-ok p { margin: 0; }
.skv-ok__t { color: #4ade80; font-size: 1.2rem; font-weight: 700; }
.skv-kv { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.7rem; font-size: 1.4rem; line-height: 1.25; }
.skv-kv dd { margin: 0; }
.skv-wrow { display: flex; align-items: center; gap: 0.7rem; font-size: 1.3rem; }
.skv-wval { min-width: 7.5rem; border: 2px solid #94a3b8; border-radius: 0.2rem; padding: 0.1rem 0.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.skv-wauto { font-size: 1.1rem; }
.skv-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.skv-k { border: 0; border-radius: 0.35rem; background: var(--y); color: #111; font: inherit; font-size: 1.15rem; padding: 0.35rem 0; cursor: pointer; min-width: 0; }
.skv-k.is-wide { grid-column: span 2; }
.skv-k:disabled { background: #4b5563; color: #9ca3af; cursor: default; }
.skv-weighmode { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.8rem; font-size: 0.9rem; font-weight: 600; }
.skv-weighmode[hidden] { display: none; }
.skv-chip { border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 0.85rem; border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; }
.skv-chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.skv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: st; }
.skv-steps li { counter-increment: st; position: relative; padding: 0.55rem 0.75rem 0.55rem 2.6rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--card); line-height: 1.45; font-size: 0.92rem; color: var(--muted); transition: border-color var(--transition), color var(--transition); }
.skv-steps li::before { content: counter(st); position: absolute; left: 0.7rem; top: 0.55rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; background: var(--alt); color: var(--muted); }
.skv-steps li.is-on { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow-md); }
.skv-steps li.is-on::before { background: var(--accent); color: var(--on-accent); }
.skv-steps li.is-done::before { content: '\2713'; background: var(--skv-ok); color: #fff; }
.skv-sim__reset { margin-top: 0.9rem; }
html:not(.skv-js) .skv-sim__reset,
html:not(.skv-js) .skv-sim .skv-seg { display: none; }

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

@media (max-width: 480px) {
  .skv-disp { border-width: 5px; }
  .skv-disp__body { grid-template-columns: minmax(0, 1fr) 2.2rem; min-height: 16rem; }
  .skv-disp__main { padding: 0.5rem; }
  .skv-b { font-size: 0.98rem; padding: 0.6rem 0.7rem; min-width: 0; }
  .skv-big { font-size: 1.15rem; }
  .skv-kv { font-size: 1.15rem; }
  .skv-tbl { font-size: 0.7rem; }
  .skv-tbl td { padding: 0.12rem 0.2rem; }
  .skv-unl { grid-template-columns: 5rem minmax(0, 1fr); }
  .skv-li { font-size: 0.98rem; }
}

/* ---------- Геозоны ---------- */
.skv-geo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; margin-top: 1.2rem; align-items: start; }
.skv-geo__map { margin: 0; }
.skv-geo__map svg { display: block; width: 100%; height: auto; }
.skv-geo__bg { fill: var(--skv-geo-bg); stroke: var(--line); }
.skv-geo__road { fill: none; stroke: var(--skv-steel); stroke-width: 10; stroke-linecap: round; opacity: 0.35; }
.skv-geo__field { fill: var(--skv-field); stroke: var(--skv-field-line); stroke-width: 2; stroke-dasharray: 7 5; }
.skv-geo__field.is-8 { stroke-dasharray: none; stroke-width: 2.5; }
.skv-geo__lab { fill: var(--text); font: 700 13px system-ui, sans-serif; }
.skv-geo__comb { transition: transform 0.9s ease-in-out; transform: translate(112px, 100px); }
.skv-geo__comb circle { fill: var(--card); stroke: var(--accent); stroke-width: 3; }
.skv-geo__comb text { font-size: 16px; }
.skv-geo[data-pos="other"] .skv-geo__comb { transform: translate(310px, 110px); }
.skv-geo[data-pos="out"] .skv-geo__comb { transform: translate(214px, 214px); }
.skv-geo__ctl { display: grid; gap: 0.8rem; align-content: start; }
.skv-disp.is-mini { border-width: 6px; }
.skv-disp.is-mini .skv-box { margin: 0.5rem; }
.skv-status { margin-right: auto; color: #f87171; font-weight: 700; }
.skv-status:empty { display: none; }
.skv-geo[data-pos="other"] .skv-status { animation: skv-blink 1s steps(2, start) infinite; }
.skv-geo__text { margin: 0; line-height: 1.55; }
.skv-geo__cmd { margin: 0; font-size: 0.9rem; color: var(--muted); }
.skv-geo__cmd code { font-size: 0.88rem; background: var(--alt); border-radius: 0.35rem; padding: 0.1rem 0.4rem; color: var(--text); }
.skv-geo__rules { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.skv-geo__rules b { color: var(--text); }

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

@media (max-width: 860px) {
  .skv-geo { grid-template-columns: 1fr; }
}

/* ---------- Метка ---------- */
.skv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.2rem; }
.skv-mode { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: 0.45rem; align-content: start; }
.skv-mode.is-note { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-light), var(--card) 70%); }
.skv-mode__ico { font-size: 1.6rem; line-height: 1; }
.skv-mode h3 { margin: 0.2rem 0 0; font-size: 1.05rem; }
.skv-mode p { margin: 0; color: var(--muted); line-height: 1.55; }

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

/* ---------- Внедрение ---------- */
.skv-how { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; counter-reset: how; }
.skv-how li { counter-increment: how; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.6rem 0.95rem 1rem; display: grid; gap: 0.3rem; align-content: start; }
.skv-how li::before { content: counter(how); position: absolute; top: 0.8rem; left: 0.95rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; background: var(--accent2); color: var(--on-accent2); }
.skv-how b { font-size: 0.98rem; }
.skv-how span { color: var(--muted); line-height: 1.5; font-size: 0.9rem; }

@media (max-width: 1000px) {
  .skv-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .skv-how { grid-template-columns: 1fr; }
}

/* ---------- Оборудование и дальше ---------- */
.skv-equip__kit { display: flex; flex-direction: column; }
.skv-equip__ico { display: flex; gap: 1rem; justify-content: center; align-items: center; aspect-ratio: 500 / 340; font-size: 3.2rem; background: linear-gradient(160deg, var(--accent-light), var(--alt)); border-radius: calc(var(--radius) - 4px); }
.skv-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.6rem; }
.skv-next__card { display: grid; gap: 0.35rem; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; text-decoration: none; color: var(--text); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.skv-next__card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.skv-next__card b { font-size: 1.05rem; color: var(--accent-strong); }
.skv-next__card span { color: var(--muted); line-height: 1.5; }

@media (max-width: 720px) {
  .skv-next { grid-template-columns: 1fr; }
}

/* ---------- Без анимаций по просьбе системы ---------- */
@media (prefers-reduced-motion: reduce) {
  .skv-live .skv-grain,
  .skv-live .skv-ping,
  .skv-live .skv-link,
  .skv-live.is-auto .skv-hsteps li.is-on button::after,
  .skv-b.is-hint,
  .skv-li.is-hint,
  .skv-geo .skv-status,
  .skv-live__dot,
  .skv-panel.is-active,
  .skv-compare[data-hint] .skv-seg__btn[data-compare-set="after"] {
    animation: none !important;
  }
  .skv-pkt,
  .skv-truck,
  .skv-geo__comb { transition: none !important; }
}