
.kz-root [hidden]{ display: none !important; }
.kz-code{ font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-sm); color: var(--blue-900); overflow-wrap: anywhere; }

.kz-vnav{ margin-top: var(--sp-5); }
.kz-vnav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kz-vnav a{
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-tool);
  color: rgba(255,255,255,.85); text-decoration: none; font-size: var(--fs-cap); font-weight: 600; line-height: var(--lh-snug);
}
.kz-vnav a:hover{ border-color: rgba(255,255,255,.6); }
.kz-vnav a[aria-current="page"]{ background: #fff; border-color: #fff; color: var(--blue-900); }
.kz-vnav a:focus-visible{ outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }

.kz-sec{ padding: var(--sp-7) 0 var(--sp-8); }
.kz-sec--info{ padding: var(--sp-8) 0; }
.kz-panel{ border: 1px solid var(--line); background: var(--surface); padding: var(--sp-5); }

.kz-layout{ display: grid; gap: var(--sp-6); align-items: start; }
.kz-layout__main{ min-width: 0; }
@media (min-width: 1024px){
  .kz-layout{ grid-template-columns: minmax(0, 1fr) 360px; }
  .kz-layout > .kz-spec{ position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow: auto; }
  .kody-page .kz-layout > .kz-spec{ top: var(--sp-4); max-height: calc(100vh - 32px); }
}

.kz-field{ min-width: 0; }
.kz-field > label{ display: block; margin-bottom: var(--sp-2); color: var(--mist); }
.kz-field input, .kz-field select, .kz-field textarea{
  width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-dark); border-radius: var(--r-tool); background: var(--paper);
  color: var(--ink); font-family: var(--f-sans); font-size: var(--fs-sm); line-height: var(--lh-ui);
}
.kz-field select{ appearance: none; padding-right: 36px; background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358667a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.kz-field textarea{ font-family: var(--f-mono); resize: vertical; }
.kz-field input::placeholder, .kz-field textarea::placeholder{ color: var(--mist-2); }
.kz-field input:focus, .kz-field select:focus, .kz-field textarea:focus{ border-color: var(--blue-500); background-color: #fff; }
.kz-root :is(input, select, textarea, button, a):focus-visible{ outline: 3px solid var(--blue-500); outline-offset: 2px; }
.kz-hero :is(a, button):focus-visible{ outline-color: var(--focus-on-dark); }
.kz-field--size input{ font-family: var(--f-mono); }

.kz-chips{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kz-chip{
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-dark); border-radius: var(--r-tool); background: var(--surface); color: var(--ink);
  font-size: var(--fs-cap); font-weight: 600; line-height: var(--lh-snug); cursor: pointer;
}
.kz-chip:hover{ border-color: var(--blue-600); }
.kz-chip[aria-pressed="true"]{ border-color: var(--blue-600); background: var(--blue-050); color: var(--blue-900); }
.kz-chip--sm{ min-height: 32px; padding: 0 var(--sp-2); font-family: var(--f-mono); font-weight: 500; }

.kz-seg{ display: inline-flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line-dark); border-radius: var(--r-tool); background: var(--surface); max-width: 100%; }
.kz-seg__label{ display: inline-flex; align-items: center; padding: 0 var(--sp-3); color: var(--mist); border-right: 1px solid var(--line); }
.kz-seg__opt{ position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-cap); line-height: var(--lh-snug); cursor: pointer; color: var(--ink); }
.kz-seg__opt + .kz-seg__opt{ border-left: 1px solid var(--line); }
.kz-seg__opt input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.kz-seg__opt:has(input:checked){ background: var(--blue-050); color: var(--blue-900); outline: 2px solid var(--blue-600); outline-offset: -2px; border-radius: var(--r-tool); }
.kz-seg__opt:has(input:focus-visible){ outline: 3px solid var(--blue-500); outline-offset: 1px; z-index: 1; }
.kz-seg__key{ font-family: var(--f-mono); font-weight: 500; }

.kz-check{ display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }
.kz-check input{ width: 18px; height: 18px; margin: 0; accent-color: var(--blue-600); }

.kz-tags{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.kz-tag{ display: inline-flex; align-items: center; padding: 2px var(--sp-2); border: 1px solid; border-radius: var(--r-tool); font-size: var(--fs-cap); font-weight: 600; line-height: var(--lh-snug); white-space: nowrap; }
.kz-tag--ok{ border-color: rgba(10,122,85,.35); background: var(--green-050); color: var(--green-700); }
.kz-tag--warn{ border-color: rgba(138,90,0,.35); background: var(--warn-050); color: var(--warn-700); }
.kz-tag--error{ border-color: rgba(166,27,27,.35); background: var(--red-050); color: var(--red-700); }
.kz-tag--accepted{ border-color: var(--blue-100); background: var(--blue-050); color: var(--blue-700); }
.kz-tag--info{ border-color: var(--line-dark); background: var(--paper); color: var(--mist); }
.kz-msgs{ margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.kz-msgs:empty{ display: none; }
.kz-msg--info{ color: var(--mist); }
.kz-msg--info li::before{ background: var(--mist-2); }

.kz-build{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.kz-build__form{ display: grid; gap: var(--sp-4); min-width: 0; }
@media (min-width: 1100px){
  .kz-build[data-mode="a"]{ grid-template-columns: minmax(0, 1fr) 380px; }
  .kz-build[data-mode="a"] > .kz-result{ position: sticky; top: 96px; }
}
.kz-step{ margin: 0; min-width: 0; padding: var(--sp-5); border: 1px solid var(--line); background: var(--surface); }
.kz-step > legend{ float: left; width: 100%; padding: 0; margin-bottom: var(--sp-4); }
.kz-step > legend ~ *{ clear: both; }
.kz-step__head{ display: flex; align-items: baseline; gap: var(--sp-3); }
.kz-step__num{ font-size: var(--fs-xs); color: var(--blue-600); }
.kz-step__note{ margin-top: var(--sp-3); }
.kz-step__tools{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-4); }
.kz-step__tools:not(:has(> :not([hidden]))){ display: none; }

.kz-tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.kz-tile{
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-tool); background: var(--surface);
  text-align: center; cursor: pointer;
}
.kz-tile:hover{ border-color: var(--blue-500); }
.kz-tile:has(input:checked){ border-color: var(--blue-600); background: var(--blue-050); outline: 1px solid var(--blue-600); outline-offset: -2px; }
.kz-tile:has(input:focus-visible){ outline: 3px solid var(--blue-500); outline-offset: 2px; }
.kz-tile__art{ display: flex; align-items: center; justify-content: center; width: 100%; height: 72px; color: var(--blue-700); }
.kz-tile__art svg{ max-width: 88%; max-height: 64px; width: auto; height: 64px; stroke-width: 1.2; }
.kz-tile__art svg *{ vector-effect: non-scaling-stroke; }
.kz-tile__name{ font-size: var(--fs-cap); font-weight: 600; line-height: var(--lh-snug); color: var(--ink); }
.kz-tile__code{ font-size: var(--fs-xs); color: var(--mist); }

.kz-mats{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.kz-mat{ position: relative; min-height: 36px; padding: var(--sp-1) var(--sp-4); cursor: pointer; }
.kz-mat:has(input:checked){ outline: 2px solid var(--blue-600); outline-offset: 2px; }
.kz-mat:has(input:focus-visible){ outline: 3px solid var(--blue-500); outline-offset: 3px; }
.kz-grade{ margin-top: var(--sp-4); max-width: 360px; }

.kz-ends{ display: grid; gap: var(--sp-4); }
.kz-fig{ margin: 0; padding: var(--sp-4); border: 1px solid var(--line); background: var(--paper); display: grid; justify-items: center; gap: var(--sp-3); }
.kz-fig__stage{ width: 100%; display: flex; justify-content: center; padding: var(--sp-3) var(--sp-5); }
.kz-fig__img{ position: relative; aspect-ratio: var(--ar, 1.4); width: min(100%, calc(200px * var(--ar, 1.4))); color: var(--blue-700); }
.kz-fig__stage.is-tall .kz-fig__img{ width: min(100%, calc(240px * var(--ar, 1))); }
.kz-fig__svg{ display: block; width: 100%; height: 100%; stroke-width: 1.4; }
.kz-fig__svg *{ vector-effect: non-scaling-stroke; }
.kz-fig figcaption{ text-align: center; max-width: 40rem; }

.kz-marker{
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 2px solid #fff; border-radius: 50%; background: var(--blue-600); color: #fff; cursor: pointer;
}
.kz-marker::before{ content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.kz-marker:hover{ background: var(--blue-800); }
.kz-marker.is-active{ background: var(--blue-900); outline: 3px solid var(--blue-300); outline-offset: 1px; }
.kz-marker__n{ font-size: var(--fs-cap); font-weight: 500; line-height: 1; }
.kz-marker__e{ position: absolute; top: -8px; right: -14px; padding: 0 4px; border: 1px solid var(--blue-100); border-radius: var(--r-tool); background: var(--surface); color: var(--blue-900); font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-snug); }
.kz-marker__e:empty{ display: none; }

.kz-cards{ display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kz-end{ padding: var(--sp-4); border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.kz-end.is-active{ border-color: var(--blue-600); }
.kz-end__head{ display: flex; align-items: center; gap: var(--sp-2); }
.kz-end__num{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-600); color: #fff; font-size: var(--fs-xs); font-weight: 500; }
.kz-end__title{ color: var(--blue-900); }
.kz-end__size{ display: grid; gap: var(--sp-2); }
.kz-end__rect{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.kz-end__same{ padding: var(--sp-2) 0; }
.kz-end__zone{ margin-top: var(--sp-1); }
.kz-end__zone:empty{ display: none; }
.kz-end__zone.is-yellow{ color: var(--warn-700); }
.kz-end__zone.is-red{ color: var(--red-700); }
.kz-end .kz-seg{ width: 100%; }
.kz-end .kz-seg__opt{ flex: 1 1 auto; justify-content: center; }

.kz-param{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.kz-param .kz-field{ width: 200px; }
.kz-param .kz-field input{ font-family: var(--f-mono); }
.kz-chips--quick{ padding-bottom: var(--sp-1); }

.kz-result{ padding: var(--sp-5); border: 1px solid var(--line); border-top: 3px solid var(--blue-600); background: var(--surface); min-width: 0; }
.kz-result__h{ margin-bottom: var(--sp-3); }
.kz-result__empty{ color: var(--mist); }
.kz-result__nocode{ color: var(--blue-700); }
.kz-result__raw{ display: block; font-size: var(--fs-lead); }
.kz-result__actions{ margin-top: var(--sp-5); align-items: flex-end; }
.kz-result__status{ margin-top: var(--sp-2); color: var(--green-700); min-height: 1.2em; }
.kz-result__disclaimer{ margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.kz-qty{ width: 96px; }
.kz-qty input{ font-family: var(--f-mono); }

.kz-anat{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-1) var(--sp-1); }
.kz-anat__seg{ display: inline-flex; flex-direction: column; gap: 2px; max-width: 11rem; }
.kz-anat__code{ font-size: var(--fs-h3); font-weight: 500; color: var(--blue-900); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.kz-anat__dash{ font-size: var(--fs-h3); color: var(--mist); line-height: var(--lh-snug); }
.kz-anat__cap{ font-size: var(--fs-xs); line-height: var(--lh-snug); }

.kz-specline{ margin-top: var(--sp-4); display: grid; gap: var(--sp-1); }
.kz-specline__label{ color: var(--mist); }
.kz-specline__text{ font-size: var(--fs-body); color: var(--ink); line-height: var(--lh-ui); overflow-wrap: anywhere; }

.kz-dock{ display: none; }
.kz-build[data-mode="ac"] .kz-dock{
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--blue-600);
}
.kz-dock__code{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 500; color: var(--blue-900); }
@media (max-width: 760px){
  .kz-build .kz-dock{
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-3);
    margin: 0 -1.25rem; padding: var(--sp-2) 1.25rem; background: var(--surface); border-top: 1px solid var(--line);
  }
  .kz-dock .btn{ flex: 0 0 auto; }
}

.kz-tabs{ display: flex; border-bottom: 1px solid var(--line-dark); margin-bottom: var(--sp-5); }
.kz-tab{
  min-height: 48px; padding: var(--sp-2) var(--sp-5); margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none;
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--mist); cursor: pointer;
}
.kz-tab:hover{ color: var(--blue-700); }
.kz-tab[aria-selected="true"]{ color: var(--blue-900); border-bottom-color: var(--blue-600); }
.kz-tabpanel:focus-visible{ outline: 3px solid var(--blue-500); outline-offset: 4px; }

.kz-spec{ border: 1px solid var(--line); border-top: 3px solid var(--blue-900); background: var(--surface); padding: var(--sp-5); min-width: 0; }
.kz-spec__head{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.kz-spec__count{ display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--sp-2); border-radius: var(--r-tool); background: var(--blue-050); color: var(--blue-900); font-size: var(--fs-sm); font-weight: 500; }
.kz-spec__empty{ margin-top: var(--sp-4); padding: var(--sp-4); border: 1px dashed var(--line-dark); }
.kz-spec__list{ list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.kz-spec__sum{ margin-top: var(--sp-3); }
.kz-spec__actions{ margin-top: var(--sp-4); }
.kz-spec__status{ margin-top: var(--sp-2); color: var(--green-700); min-height: 1.2em; }
.kz-item{ display: grid; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-3) var(--sp-3); border-top: 1px solid var(--line); border-left: 3px solid var(--green-600); }
.kz-item.is-warn{ border-left-color: var(--warn-700); }
.kz-item.is-error{ border-left-color: var(--red-700); }
.kz-item.is-accepted{ border-left-color: var(--blue-500); }
.kz-item__main{ min-width: 0; display: grid; gap: var(--sp-1); }
.kz-item__spec{ font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--ink); overflow-wrap: anywhere; }
.kz-item__code{ font-size: var(--fs-cap); }
.kz-item__nocode{ color: var(--blue-700); }
.kz-item__side{ display: flex; align-items: center; gap: var(--sp-2); }
.kz-item__side .kz-tag{ margin-right: auto; }
.kz-item__qty{ display: inline-flex; align-items: center; gap: var(--sp-1); }
.kz-item__qty input{ width: 72px; min-height: 36px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line-dark); border-radius: var(--r-tool); background: var(--paper); font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--ink); }
.kz-item__del{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: var(--r-tool); background: none; color: var(--mist); cursor: pointer; }
.kz-item__del:hover{ color: var(--red-700); border-color: var(--line); }
.kz-item__del svg{ width: 18px; height: 18px; }

.kz-sug__box{ position: relative; }
.kz-sug__input.kz-sug__input{ min-height: 56px; padding: var(--sp-3) var(--sp-4); font-family: var(--f-mono); font-size: var(--fs-lead); font-weight: 500; color: var(--blue-900); background: #fff; }
.kz-sug__list{
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: var(--sp-1) 0;
  max-height: 336px; overflow: auto; border: 1px solid var(--line-dark); border-radius: var(--r-tool); background: var(--surface);
}
.kz-sug__grp + .kz-sug__grp{ margin-top: var(--sp-1); border-top: 1px solid var(--line); }
.kz-sug__grp-h{ display: block; padding: var(--sp-2) var(--sp-4) var(--sp-1); }
.kz-sug__grp-list{ list-style: none; margin: 0; padding: 0; }
.kz-sug__opt{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-4); cursor: pointer; }
.kz-sug__opt:hover, .kz-sug__opt.is-active{ background: var(--blue-050); }
.kz-sug__opt.is-active{ outline: 2px solid var(--blue-600); outline-offset: -2px; }
.kz-sug__val{ min-width: 6rem; font-size: var(--fs-sm); font-weight: 500; color: var(--blue-900); }
@media (max-width: 600px){ .kz-sug__opt{ flex-direction: column; align-items: flex-start; } }
.kz-sug__more, .kz-sug__more:hover{ cursor: default; background: none; color: var(--mist); border-top: 1px solid var(--line); }
.kz-sug__opt.is-yellow .kz-sug__hint{ color: var(--warn-700); }
.kz-sug__opt.is-red .kz-sug__hint{ color: var(--red-700); }
.kz-sug__steps{ list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kz-sug__step{ display: grid; gap: 2px; min-width: 72px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-tool); background: var(--surface); }
.kz-sug__step.is-done{ border-color: var(--blue-100); background: var(--blue-050); }
.kz-sug__step.is-current{ border-color: var(--blue-600); outline: 1px solid var(--blue-600); outline-offset: -2px; }
.kz-sug__step-val{ font-size: var(--fs-sm); font-weight: 500; color: var(--blue-900); overflow-wrap: anywhere; }
.kz-sug__help{ margin-top: var(--sp-3); }
.kz-sug__actions{ margin-top: var(--sp-5); }
.kz-live{ margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.kz-live__wait{ color: var(--mist); }
.kz-live__fields{ margin: var(--sp-4) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3) var(--sp-5); }
.kz-live__fields dd{ margin: 2px 0 0; color: var(--ink); }
.kz-live .kz-specline{ margin-top: 0; }

.kz-paste__hint{ margin-top: var(--sp-2); max-width: 52rem; }
.kz-paste__actions{ margin-top: var(--sp-4); }
.kz-paste__out{ margin-top: var(--sp-5); }
.kz-paste__out:empty{ display: none; }
.kz-paste__empty{ color: var(--mist); }
.kz-paste__sum{ margin-bottom: var(--sp-3); }
.kz-paste__after{ margin-top: var(--sp-4); }
.kz-ptable{ min-width: 760px; }
.kz-ptable th, .kz-ptable td{ padding: var(--sp-3); }
.kz-ptable tbody th{ width: 40px; color: var(--mist); font-size: var(--fs-cap); }
.kz-ptable__raw{ width: 24%; }
.kz-ptable__res{ width: 46%; }
.kz-ptable__st{ width: 20%; }
.kz-ptable__src{ display: block; font-size: var(--fs-cap); color: var(--mist); overflow-wrap: anywhere; white-space: pre-wrap; }
.kz-ptable__src.is-code{ font-family: var(--f-mono); }
.kz-ptable__fixline{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); }
.kz-ptable__fix{ margin-top: var(--sp-1); font-size: var(--fs-cap); }
.kz-ptable__input{ width: 100%; min-height: 40px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--blue-500); border-radius: var(--r-tool); font-family: var(--f-mono); font-size: var(--fs-cap); }
.kz-ptable__edit-actions{ display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.kz-ptable__spec{ color: var(--ink); overflow-wrap: anywhere; }
.kz-ptable__res .kz-code{ display: inline-block; margin-top: 2px; font-size: var(--fs-cap); }
.kz-ptable__qty{ white-space: nowrap; }
.kz-ptable__st .kz-tags{ margin-top: 0; }
.kz-ptable tr.is-ok th{ border-left: 4px solid var(--green-600); }
.kz-ptable tr.is-warn th{ border-left: 4px solid var(--warn-700); }
.kz-ptable tr.is-accepted th{ border-left: 4px solid var(--blue-500); }
.kz-ptable tr.is-error th{ border-left: 4px solid var(--red-700); }
.kz-ptable tr.is-error th, .kz-ptable tr.is-error td{ background: var(--red-050); }

.kz-why__list{ list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
@media (min-width: 640px){ .kz-why__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .kz-why__list{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kz-why__list li{ padding-top: var(--sp-4); border-top: 2px solid var(--blue-600); display: grid; gap: var(--sp-2); align-content: start; }
.kz-why__num{ font-size: var(--fs-xs); color: var(--blue-600); }

.kz-ref{ margin-top: var(--sp-8); }
.kz-ref__lead{ margin-top: var(--sp-3); max-width: 52rem; }
.kz-ref__h{ margin: var(--sp-6) 0 var(--sp-3); }
.kz-ref__table td{ font-size: var(--fs-sm); }
.kz-ref__table tbody th{ width: 80px; }
.kz-ref__grid{ display: grid; gap: 0 var(--sp-5); }
@media (min-width: 900px){ .kz-ref__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kz-ref__rules{ margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); max-width: 52rem; color: var(--ink); }
.kz-ref__ex{ margin: 0; display: grid; gap: var(--sp-3); }
.kz-ref__ex > div{ display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
@media (min-width: 768px){ .kz-ref__ex > div{ grid-template-columns: 22rem minmax(0, 1fr); gap: var(--sp-5); } }
.kz-ref__ex dd{ margin: 0; color: var(--ink); }

.kz-variants{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 768px){ .kz-variants{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kz-variant{ display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--line); background: var(--surface); }
.kz-variant--rec{ border-top: 3px solid var(--blue-600); }
.kz-variant__key{ color: var(--blue-600); }
.kz-index-notes{ margin-top: var(--sp-7); max-width: 52rem; }
.kz-index-notes ul{ margin-top: var(--sp-3); padding-left: var(--sp-5); display: grid; gap: var(--sp-2); color: var(--ink); }

@media (max-width: 640px){
  .kz-sec{ padding: var(--sp-6) 0 var(--sp-7); }
  .kz-panel, .kz-step, .kz-result, .kz-spec{ padding: var(--sp-4); }
  .kz-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-fig__stage{ padding: var(--sp-3) var(--sp-4); }
  .kz-fig__img{ width: min(100%, calc(170px * var(--ar, 1.4))); }
  .kz-cards{ grid-template-columns: minmax(0, 1fr); }
  .kz-param .kz-field{ width: 100%; }
  .kz-tab{ flex: 1 1 0; padding: var(--sp-2) var(--sp-3); }
  .kz-result__actions .kz-qty{ width: 100%; }
  .actions:not(.actions--stack){ flex-direction: column; align-items: stretch; }
  .actions:not(.actions--stack) > .btn{ width: 100%; }
  .actions:not(.actions--stack) > .btn-link{ align-self: flex-start; }
  .kz-ptable{ min-width: 0; }
  .kz-ptable thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kz-ptable, .kz-ptable tbody, .kz-ptable tr, .kz-ptable th, .kz-ptable td{ display: block; width: 100%; }
  .kz-ptable tbody tr{ border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
  .kz-ptable tbody th{ width: auto; border: 0; padding-bottom: 0; }
  .kz-ptable td{ border: 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .kz-ptable tr[class] th{ border-left: 0; }
  .kz-ptable tbody tr.is-ok{ border-left: 4px solid var(--green-600); }
  .kz-ptable tbody tr.is-warn{ border-left: 4px solid var(--warn-700); }
  .kz-ptable tbody tr.is-accepted{ border-left: 4px solid var(--blue-500); }
  .kz-ptable tbody tr.is-error{ border-left: 4px solid var(--red-700); background: var(--red-050); }
  .kz-ptable__raw{ width: auto; }
  .kz-ptable__qty::before{ content: "Кол-во: "; font-family: var(--f-sans); color: var(--mist); }
}
