/* Kastl Group - конфигураторы металлоизделий .kf (2026-09-30). Чертёжная эстетика: ватман-сетка, моно, синий акцент. */
.kf .rd-sec__head{margin-bottom:14px}
.kf__steps{display:flex;gap:8px;list-style:none;margin:0 0 18px;padding:0;flex-wrap:wrap}
.kf__step{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;transition:color .25s,border-color .25s,background .25s}
.kf__step b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.05);color:var(--dim);font-size:10px;transition:background .25s,color .25s}
.kf__step.is-on{color:var(--ink);border-color:rgba(47,107,255,.5);background:var(--arc-dim)}
.kf__step.is-on b{background:var(--arc);color:#fff}

.kf__grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:22px;align-items:start}
.kf__ctrl{position:sticky;top:84px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 8px;min-height:420px}
.kf__f{margin-bottom:16px}
.kf__lab{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.kf__chips{display:flex;flex-wrap:wrap;gap:6px}
.kf__chip{appearance:none;border:1px solid var(--line-strong);background:rgba(255,255,255,.02);color:#C9D2E0;font:500 13px/1.1 var(--body);padding:9px 12px;border-radius:9px;cursor:pointer;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .12s}
.kf__chip:hover{border-color:rgba(47,107,255,.6);color:#fff}
.kf__chip:active{transform:scale(.97)}
.kf__chip.is-on{background:var(--arc);border-color:var(--arc);color:#fff;box-shadow:0 8px 20px -10px rgba(47,107,255,.9)}
.kf__chip:focus-visible{outline:2px solid var(--arc-hot);outline-offset:2px}

.kf__range{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:10px;align-items:center}
.kf__range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--arc),rgba(122,162,255,.25));outline:none;accent-color:var(--arc)}
.kf__range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--arc);box-shadow:0 0 0 4px rgba(47,107,255,.18);cursor:grab}
.kf__range input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--arc);box-shadow:0 0 0 4px rgba(47,107,255,.18);cursor:grab}
.kf__num{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg);padding:0 10px}
.kf__num input{width:100%;min-width:0;background:transparent;border:0;color:var(--ink);font:600 14px/1 var(--mono);padding:10px 0;outline:none;-moz-appearance:textfield}
.kf__num input::-webkit-outer-spin-button,.kf__num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kf__num i{font:normal 12px/1 var(--mono);color:var(--dim)}
.kf__num:focus-within{border-color:var(--arc)}
.kf__num--wide{max-width:190px}
.kf__check{position:relative;display:inline-block;width:46px;height:26px;cursor:pointer}
.kf__check input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kf__check span{position:absolute;inset:0;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);transition:background .2s}
.kf__check span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#C9D2E0;transition:transform .2s,background .2s}
.kf__check input:checked+span{background:var(--arc);border-color:var(--arc)}
.kf__check input:checked+span::after{transform:translateX(20px);background:#fff}
.kf__check input:focus-visible+span{outline:2px solid var(--arc-hot);outline-offset:2px}

.kf__stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.kf__sheet{position:relative;width:100%;height:auto;align-self:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:720/400;background-color:#0B1220;
  background-image:linear-gradient(rgba(122,162,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(122,162,255,.075) 1px,transparent 1px),linear-gradient(rgba(122,162,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(122,162,255,.03) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px}
.kf__sheet::after{content:"";position:absolute;inset:8px;border:1px solid rgba(122,162,255,.14);border-radius:8px;pointer-events:none}
.kf__svg{position:relative;display:block;width:100%;height:100%}
.kf__corner{position:absolute;z-index:2;font:500 10px/1 var(--mono);letter-spacing:.16em;color:rgba(122,162,255,.75)}
.kf__corner--tl{left:18px;bottom:16px}
.kf__corner--tr{right:18px;top:16px}

/* Классы чертежа (общие с генератором tools/make_bp.js) */
.kd-l{stroke:#CFE0FF;stroke-width:1.3;fill:none}
.kd-s{stroke:#7AA2FF;stroke-width:1;fill:none}
.kd-h{stroke:rgba(122,162,255,.42);stroke-width:.8;fill:none}
.kd-a{stroke:#4C82FF;stroke-width:2.2;fill:none;stroke-linejoin:round}
.kd-d{stroke:#8C98AB;stroke-width:.8;fill:none}
.kd-dash{stroke-dasharray:5 4}
.kd-fill{fill:rgba(47,107,255,.10)}
.kd-fill.kd-s,.kd-fill.kd-a{fill:rgba(47,107,255,.10)}
.kd-glass{fill:rgba(122,162,255,.24);stroke:none}
.kd-post{fill:#1B2A45;stroke:#9FBAFF;stroke-width:1.2}
.kd-conc{fill:rgba(140,152,171,.08);stroke:rgba(140,152,171,.45);stroke-width:.8;stroke-dasharray:3 3}
.kd-dot{fill:rgba(140,152,171,.6)}
.kd-gr{stroke:#5B6B86;stroke-width:1.4}
.kd-grh{stroke:#344158;stroke-width:1}
.kd-roll{fill:#0B1220;stroke:#7AA2FF;stroke-width:1.4}
.kd-occ{fill:rgba(233,237,244,.03);stroke:rgba(233,237,244,.34);stroke-width:1;stroke-dasharray:4 3}
.kd-wall{fill:rgba(140,152,171,.12);stroke:rgba(140,152,171,.5)}
.kd-bolt{stroke:#7AA2FF;stroke-width:9;fill:none;stroke-linecap:round;opacity:.9}
.kd-t{fill:#9FB3D6;font:500 12px var(--mono);letter-spacing:.02em}
.kd-tb{fill:#E9EDF4;font:600 15px var(--mono);letter-spacing:.04em}

.kf__out{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px 16px}
.kf__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px dashed rgba(151,167,192,.14)}
.kf__row span{font-size:13px;color:var(--dim);flex:0 0 auto}
.kf__row b{font:500 13.5px/1.35 var(--mono);color:var(--ink);text-align:right}
.kf__row--hl b{color:var(--arc-hot);font-size:15px}
.kf__total{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;padding:14px 16px;background:var(--arc-dim);border:1px solid rgba(47,107,255,.42);border-radius:10px}
.kf__total span{font-size:13px;color:#C9D2E0}
.kf__total b{font:400 30px/1 var(--display);letter-spacing:.02em;color:#fff;text-align:right}
.kf__note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--dim)}

.kf__lead{position:relative;background:linear-gradient(180deg,rgba(47,107,255,.10),rgba(47,107,255,.02));border:1px solid rgba(47,107,255,.38);border-radius:14px;padding:18px}
.kf__lead-h{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.kf__lead-h b{font-size:17px;color:#fff}
.kf__lead-h span{font-size:13px;color:#C9D2E0}
.kf__lead-f{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px}
.kf__lead-f input{width:100%;min-width:0;background:var(--bg);border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);font:15px/1.2 var(--body);padding:13px 14px;outline:none;transition:border-color .18s}
.kf__lead-f input:focus{border-color:var(--arc)}
.kf__lead-f .btn{white-space:nowrap}
.kf__lead.is-sent .kf__lead-f{display:none}
.kf__status{display:none;margin-top:10px;font-size:14px;line-height:1.45;padding:10px 12px;border-radius:9px}
.kf__status.is-ok{display:block;color:var(--arc-hot);background:var(--arc-dim);border:1px solid rgba(47,107,255,.45)}
.kf__status.is-err{display:block;color:#ff8a8a;background:rgba(255,120,120,.08);border:1px solid rgba(255,120,120,.45)}
.kf__pd{margin:10px 0 0;font-size:12px;color:var(--dim);line-height:1.45}
.kf__pd a{color:#C9D2E0;border-bottom:1px dashed rgba(201,210,224,.5)}

@media(max-width:1100px){.kf__lead-f{grid-template-columns:1fr 1fr}.kf__lead-f .btn{grid-column:1/-1}}
@media(max-width:980px){
  .kf__grid{display:flex;flex-direction:column;gap:14px}
  .kf__stage{display:contents}
  .kf__sheet{order:1}
  .kf__ctrl{order:2;position:static;min-height:0;width:100%}
  .kf__out{order:3}
  .kf__lead{order:4}
}
@media(max-width:640px){
  .kf__steps{gap:6px}.kf__step{font-size:11px;padding:6px 10px 6px 6px}
  .kf__lead-f{grid-template-columns:1fr}
  .kf__total b{font-size:26px}
  .kf__row{flex-direction:column;gap:2px;align-items:flex-start}.kf__row b{text-align:left}
  .kd-t{font-size:17px}.kd-tb{font-size:19px}.kf__corner{display:none}
}
@media(prefers-reduced-motion:reduce){.kf__chip,.kf__step,.kf__check span,.kf__check span::after{transition:none}}