/* KAR ENGINEER — экраны 2–6 (подключается после style.css, graphite.css, system3d.css).
   Цвета (Brand ID, лист «KAR ENGINEER COLORS»): графит #221F20 / #292627 · сталь #616C71 · серый #B1B4BC · светлый #E6E3E0 (миллиметровка) ·
   синий провод #479FF8 — главный акцент вместо мятного; цвета жил: коричневый (L), синий (N), жёлто-зелёный (PE).
   Метафора: инженерный чертёж — планы, размерные линии, узлы, ведомости, штампы, провода.
   Ритм: графит (1) → светлый лист (2) → серый (3) → графит (4) → светлый (5) → графит (6 + подвал). */
:root{--sp:clamp(64px,6vw,96px);--sp-t:calc(var(--sp) + 20px);--f-text:Montserrat,"Noto Sans Thai",Arial,sans-serif;--f-mono:"Plex Mono","Noto Sans Thai",ui-monospace,monospace;
  --blue:#479FF8;--blue-2:#2F86E6;--pale:#D3E7FD;--brown:#A0705F;--pe-g:#4FB25A;--pe-y:#F2DA1C;--paper:#F4F2EF;--ink:#221F20;
  --line-l:rgba(34,31,32,.12);--line-dk:rgba(230,227,224,.12);
  --pe:repeating-linear-gradient(135deg,var(--pe-g) 0 6px,var(--pe-y) 6px 12px)}

/* ---------- общее ---------- */
.en-kick{margin:0 0 22px;font-size:15px;text-transform:uppercase;letter-spacing:.18em;color:var(--blue)}
.en2 .en-kick,.en5 .en-kick{color:var(--blue-2)}
.en3 .en-kick{color:var(--ink)}
.en-h2{margin:0;font:700 clamp(26px,2.7vw,44px)/1.08 var(--f-head);text-transform:uppercase;letter-spacing:.01em;max-width:24ch}
.en-lead{margin:22px 0 0;font:400 clamp(13px,.9vw,15px)/1.7 var(--f-mono);letter-spacing:.01em;max-width:66ch;color:var(--grey)}
.en3 .en-lead,.en5 .en-lead{color:#2E2B2C}
.en-h3{margin:0 0 14px;font:600 clamp(18px,1.4vw,22px)/1.3 var(--f-text);max-width:26ch}
.en-text{margin:0;font:400 clamp(13px,.9vw,15px)/1.7 var(--f-mono);letter-spacing:.01em;max-width:44ch;min-height:5.1em}
.en-num{margin:0 0 16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.en3 .en-num{color:#2E2B2C}
.en-head{padding:0 var(--pad)}
.en-note{margin:12px 0 0;font-size:13px;color:var(--steel)}
.en-note-r{text-align:right;padding:0 var(--pad)}
.en4 .en-note{color:#8C8F94}
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.in .rv,.rv.in{opacity:1;transform:none}
.sg{fill:currentColor}
.caret{display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--blue);animation:caret 1s steps(1) infinite}
/* миллиметровка: на светлом — тёмная, на графите — светлая */
.en2,.en5{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23221F20' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23221F20' stroke-opacity='.06' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-position:-1px -1px}
.en4,.en6{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23E6E3E0' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23E6E3E0' stroke-opacity='.035' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E");background-position:-1px -1px}

/* значок AI: «AI» в кольце с бегущим штрихом */
.aib{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(71,159,248,.5)}
.aib em{font:600 8.5px var(--f-mono);font-style:normal;letter-spacing:.02em;color:var(--blue)}
.aib::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--blue);animation:aiSpin 2.2s linear infinite}
.en2-title .aib em{color:var(--blue-2)}.en2-title .aib::after{border-top-color:var(--blue-2)}
@keyframes aiSpin{to{transform:rotate(360deg)}}

/* жилы проводов — легенда */
.wires{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 0;font-size:13px;color:#4A4F52}
.wires span{display:inline-flex;align-items:center;gap:8px}
.wires i{display:inline-block;width:26px;height:4px;border-radius:2px}
.w-l{background:var(--brown)}.w-n{background:var(--blue)}.w-pe{background:var(--pe)}

/* вкладки — как кнопки панели KAR: узкие, иконка + текст капсом 11px */
.en-tabs{display:grid;gap:4px;margin:36px var(--pad) 0;padding:6px;border-radius:16px;background:rgba(244,242,239,.35);box-shadow:inset 0 0 0 1px rgba(34,31,32,.12)}
.en-tabs.t5{grid-template-columns:repeat(5,1fr)}
.en-tabs.t6{grid-template-columns:repeat(6,1fr)}
.en-tabs.dk{background:rgba(230,227,224,.04);box-shadow:inset 0 0 0 1px var(--line-dk)}
.tb{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 10px;border:0;border-radius:11px;background:transparent;color:#2E2B2C;
  font:600 11px/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;transition:background .35s,color .35s}
.tb span{min-width:0}
.tb svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tb:hover{background:rgba(244,242,239,.6)}
.tb.on{background:var(--ink);color:var(--sand)}.tb.on svg{stroke:var(--blue)}
.tb .dev{font:500 9.5px var(--f-mono);letter-spacing:.06em;padding:3px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px currentColor;opacity:.75}
.dk .tb{color:var(--grey)}
.dk .tb:hover{background:rgba(71,159,248,.12);color:var(--blue)}
.dk .tb.on{background:var(--blue);color:var(--ink)}.dk .tb.on svg{stroke:var(--ink)}

/* рабочая панель: до 650px, 16:10, скругление 14px; карточки внутри 10px */
.pn{position:relative;width:100%;max-width:650px;aspect-ratio:16 / 10;margin-left:auto;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pn-light{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(34,31,32,.1),0 40px 80px -40px rgba(34,31,32,.5)}
.pn-dark{background:#2B2829;color:var(--sand);box-shadow:0 0 0 1px var(--line-dk),0 40px 80px -40px rgba(0,0,0,.7)}
.pn-bar{flex:none;display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;background:var(--ink);color:var(--sand);font:700 11px var(--f-head);letter-spacing:.03em}
.pn-dark .pn-bar{background:#221F20;border-bottom:1px solid var(--line-dk)}
.pn-bar .sg{width:15px;height:15px;color:var(--blue)}
.pn-path{margin-left:auto;font:400 11px var(--f-mono);letter-spacing:.04em;color:var(--grey)}
.tagc{font:500 11px var(--f-mono);padding:5px 9px;border-radius:7px;background:rgba(71,159,248,.16);color:var(--blue)}
.q{opacity:0;transform:translateY(8px);animation:qIn .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes qIn{to{opacity:1;transform:none}}

/* строки документа и статусы */
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line-l);font:500 12.5px/1.3 var(--f-text);transition:box-shadow .3s}
.row+.row{margin-top:6px}
.row b{font:500 11px var(--f-mono);color:#4A4F52}
.row:hover{box-shadow:0 0 0 1.5px var(--blue)}
.pn-dark .row{background:#343132;color:var(--sand);box-shadow:0 0 0 1px var(--line-dk)}
.pn-dark .row b{color:var(--grey)}
.pn-dark .row:hover{box-shadow:0 0 0 1.5px var(--blue)}
.stt{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;font:500 11px var(--f-mono)!important;white-space:nowrap}
.stt::before{content:"";width:12px;height:3px;border-radius:2px;background:currentColor}
.stt-n{background:rgba(71,159,248,.14);color:var(--blue-2)!important}
.stt-l{background:rgba(160,112,95,.16);color:#8A5A49!important}
.stt-pe{background:rgba(79,178,90,.14);color:#2F7A38!important}.stt-pe::before{background:var(--pe)}
.stt-g{background:rgba(97,108,113,.12);color:#4A4F52!important}
.pn-dark .stt-n{color:var(--blue)!important}.pn-dark .stt-l{color:#D29C86!important}.pn-dark .stt-pe{color:#7FD08A!important}.pn-dark .stt-g{color:var(--grey)!important;background:rgba(177,180,188,.1)}
.doc-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 13px var(--f-text)}
.doc-h svg{width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.doc-h .mono{margin-left:auto;font-size:11px;font-weight:400;color:var(--steel)}
.pn-dark .doc-h .mono{color:var(--grey)}
.ai-say{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 10px;border-radius:8px;background:rgba(71,159,248,.1);font:500 12px/1.35 var(--f-text)}
.ai-say .aib{width:18px;height:18px}.ai-say .aib em{font-size:7px}
.eng{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 10px;border-radius:8px;font:500 12px/1.35 var(--f-text);box-shadow:inset 0 0 0 1px rgba(79,178,90,.45)}
.eng i{flex:none;width:18px;height:4px;border-radius:2px;background:var(--pe)}

/* ---------- план объекта (SVG) ---------- */
.plan-box{position:relative;min-width:0;min-height:0}
.plan{display:block;width:100%;height:100%;overflow:visible}
.plan>*:not(.rm){pointer-events:none}
.plan .wall{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:miter}
.plan .iw{fill:none;stroke:var(--ink);stroke-width:1.6}
.plan .win{stroke:var(--paper);stroke-width:3.4}.plan .win2{stroke:var(--ink);stroke-width:.7}
.plan .door{fill:none;stroke:#7A7F83;stroke-width:.8;stroke-dasharray:2 2}
.plan .rm{fill:transparent;stroke:none;cursor:pointer;transition:fill .35s}
.plan .rm:hover,.plan .rm.hv{fill:rgba(71,159,248,.13)}
.plan .rn{font:500 8.5px var(--f-mono);fill:#4A4F52;pointer-events:none;text-anchor:middle}
.plan .ra{font:400 7.5px var(--f-mono);fill:#7A7F83;pointer-events:none;text-anchor:middle}
.plan .wire{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:opacity .5s}
.plan .w-l{stroke:var(--brown)}.plan .w-n{stroke:var(--blue)}.plan .w-pe{stroke:var(--pe-g);stroke-dasharray:5 4}
.plan .dev circle{fill:var(--paper);stroke:var(--ink);stroke-width:.9}
.plan .dev path{fill:none;stroke:var(--ink);stroke-width:.9}
.plan .shd rect{fill:var(--ink)}.plan .shd text{font:600 7px var(--f-mono);fill:var(--paper);text-anchor:middle}
.plan .dim{pointer-events:none;opacity:0;transition:opacity .35s}
.plan .dim.on{opacity:1}
.plan .dim line{stroke:var(--blue-2);stroke-width:.8}
.plan .dim .tk{stroke-width:1.2}
.plan .dim text{font:500 8px var(--f-mono);fill:var(--blue-2);text-anchor:middle}
.plan .dim .hatch{fill:url(#hatch2)}
.plan .pin{opacity:0;transition:opacity .4s}
.plan .pin.on{opacity:1}
.plan .pin circle{fill:var(--brown)}
.plan .pin .ring{fill:none;stroke:var(--brown);stroke-width:1;animation:pinR 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.plan .pin text{font:700 8px var(--f-mono);fill:#fff;text-anchor:middle}
@keyframes pinR{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.plan .hl{fill:none;stroke:var(--blue);stroke-width:2.6;opacity:0;stroke-dasharray:4 3;animation:dash 1.2s linear infinite;transition:opacity .4s}
.plan .hl.on{opacity:1}
.plan .hl.l{stroke:var(--brown)}
@keyframes dash{to{stroke-dashoffset:-14}}
/* тёмный вариант плана (экран 4) */
.plan.dkp .wall,.plan.dkp .iw{stroke:#D9D6D3}
.plan.dkp .win{stroke:#2B2829}.plan.dkp .win2{stroke:#D9D6D3}
.plan.dkp .rn{fill:#B1B4BC}.plan.dkp .ra{fill:#8C8F94}
.plan.dkp .dev circle{fill:#2B2829;stroke:#D9D6D3}.plan.dkp .dev path{stroke:#D9D6D3}
.plan.dkp .shd rect{fill:#D9D6D3}.plan.dkp .shd text{fill:#221F20}
.plan.dkp .dim line{stroke:var(--blue)}.plan.dkp .dim text{fill:var(--blue)}
.plan.dkp .rm:hover,.plan.dkp .rm.hv{fill:rgba(71,159,248,.16)}
/* карточка помещения */
.room-pop{position:absolute;z-index:3;min-width:150px;padding:10px 12px;border-radius:10px;background:var(--ink);color:var(--sand);font-size:11px;line-height:1.55;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.room-pop.on{opacity:1;transform:none}
.room-pop b{display:block;margin-bottom:6px;font:600 12px var(--f-text);color:var(--blue)}
.room-pop span{display:grid;grid-template-columns:1fr auto;gap:12px;color:var(--grey)}
.room-pop span em{font-style:normal;color:var(--sand)}

/* ============ ЭКРАН 2 — что такое KAR Engineer (светлый лист) ============ */
.en2{position:relative;background-color:var(--sand);color:var(--ink);overflow:hidden}
.en2-grid{display:grid;grid-template-columns:var(--split) 1fr}
.en2-text{padding:var(--sp-t) clamp(20px,2.4vw,40px) var(--sp) var(--pad);border-right:1px solid var(--line-l);background:rgba(230,227,224,.72)}
.en2-title{position:relative;margin:0;font:700 clamp(26px,2.9vw,46px)/1.02 var(--f-head);letter-spacing:.01em;width:max-content}
.en2-title .wl{position:relative;display:block;width:max-content}
.en2-title .tx{opacity:0}
.en2-title .bar{position:absolute;left:-.05em;right:-.05em;top:.04em;bottom:.02em;background:var(--blue);transform:scaleX(0);transform-origin:left}
.en2-title .aib-lg{position:absolute;right:-44px;bottom:8px;width:30px;height:30px;box-shadow:inset 0 0 0 1px rgba(47,134,230,.5)}.en2-title .aib-lg em{font-size:10.5px}
.en2-sub{margin:24px 0 0;font:600 clamp(15px,1.1vw,18px)/1.4 var(--f-text);max-width:32ch}
.en2-type{margin:14px 0 22px;font-size:clamp(13px,.9vw,15px);line-height:1.6;color:var(--blue-2);min-height:3.2em;max-width:38ch}
.en2-body{margin:0 0 16px;font-size:clamp(13px,.9vw,15px);line-height:1.7;color:#3A3F42;max-width:50ch}
.en2-res{margin:0 0 26px;padding:12px 14px;border-left:3px solid var(--blue);background:rgba(211,231,253,.7);font:500 clamp(13px,.95vw,15px)/1.5 var(--f-text);max-width:46ch;min-height:4.6em}
.en2-res b{margin-right:6px}
.en-rt .hl{background:linear-gradient(transparent 58%,rgba(71,159,248,.35) 58%)}
.en2-text>*:not(.en2-title){opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.en2.in .en2-text>*{opacity:1;transform:none}
.en2.in .en2-text>*:nth-child(3){transition-delay:.25s}.en2.in .en2-text>*:nth-child(4){transition-delay:.4s}.en2.in .en2-text>*:nth-child(5){transition-delay:.55s}.en2.in .en2-text>*:nth-child(6){transition-delay:.7s}.en2.in .en2-text>*:nth-child(7){transition-delay:.85s}

.en2-stage{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:16px;padding:calc(var(--sp-t) - 20px) var(--pad) var(--sp) clamp(24px,3vw,56px)}
.en-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.en-net path{fill:none;stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .6s}
.en-net path.on{opacity:1}
.en-net .run{stroke-dasharray:3 9;animation:dash 1s linear infinite}
.en-net circle{opacity:0;transition:opacity .5s}.en-net circle.on{opacity:1}
.files{position:relative;z-index:1;width:100%;max-width:650px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.file{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--paper);box-shadow:0 0 0 1px var(--line-l),0 12px 24px -16px rgba(34,31,32,.4);
  opacity:0;transform:translateY(-12px) rotate(var(--r,0deg));transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.file:nth-child(1){--r:-2deg}.file:nth-child(3){--r:2deg}
.file.on{opacity:1;transform:none}
.file.lk{box-shadow:0 0 0 1.5px var(--c,var(--blue)),0 12px 24px -16px rgba(34,31,32,.4)}
.file svg{grid-row:1 / 3;width:24px;height:24px;fill:none;stroke:var(--c,var(--blue-2));stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.file[data-k="pdf"]{--c:var(--brown)}.file[data-k="ph"]{--c:var(--blue-2)}.file[data-k="xls"]{--c:var(--pe-g)}
.file b{font:600 13px var(--f-text)}
.file span{font-size:11px;color:var(--steel)}
.en-ws{position:relative;z-index:1}
.ws-in{flex:1;display:grid;grid-template-columns:1.45fr 1fr;min-height:0}
.ws-in .plan-box{padding:10px 8px 10px 10px;border-right:1px solid var(--line-l)}
.ws-side{position:relative;padding:12px 12px 10px;overflow:hidden;font-size:12px}
.ws-empty{display:flex;flex-direction:column;justify-content:center;height:100%;gap:10px;color:var(--steel);font:400 12px/1.6 var(--f-mono)}
.ws-empty i{display:block;height:8px;border-radius:4px;background:rgba(34,31,32,.07)}
.ws-empty i:nth-child(2){width:70%}.ws-empty i:nth-child(3){width:84%}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.kit span{padding:7px 9px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line-l);font:500 12px var(--f-text)}
.kit-n{margin:8px 0 0;font:400 11px/1.5 var(--f-mono);color:var(--steel)}
.ver{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--ink);color:var(--sand);font:500 12px var(--f-text)}
.ver b{font:500 11px var(--f-mono);color:var(--blue)}
.en-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:650px}
.en-steps button{display:flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 8px;border:0;border-radius:8px;background:var(--ink);color:var(--sand);font:600 11px var(--f-text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s}
.en-steps button .mono{color:var(--blue);font-weight:400}
.en-steps button.on{background:var(--blue);color:var(--ink)}.en-steps button.on .mono{color:var(--ink)}
.en-prog{position:absolute;left:0;right:0;bottom:-8px;height:2px;background:rgba(34,31,32,.1)}
.en-prog i{display:block;height:100%;width:0;background:var(--blue)}
.en2-stage .en-note{margin:0}

/* ============ ЭКРАН 3 — кому подходит (серый) ============ */
.en3{background:var(--grey);color:var(--ink);padding:calc(var(--sp) * .7) 0 var(--sp)}
.en3-body{display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:clamp(32px,5vw,90px);align-items:start;margin-top:96px;padding:0 var(--pad)}
.en3 .en-h3{font-size:clamp(20px,1.6vw,26px)}
.en3 .en-text{color:#262425}
/* комплект чертежей: листы стопкой, выбранный выезжает вперёд */
.set{position:relative;width:100%;max-width:650px;aspect-ratio:16 / 10;margin-left:auto}
.sheetx{position:absolute;inset:0;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px rgba(34,31,32,.14),0 30px 60px -36px rgba(34,31,32,.55);
  transform:translate(calc(var(--d) * -12px),calc(var(--d) * -12px));transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s;overflow:hidden}
.sheetx:not(.on){opacity:calc(1 - var(--d) * .12)}
.sheetx.on{transform:none}
.sh-in{position:absolute;inset:12px;border:1px solid rgba(34,31,32,.45);border-radius:6px;display:flex;flex-direction:column;padding:14px 16px 0}
.sh-top{display:flex;align-items:center;gap:9px;margin-bottom:12px;font:700 11px var(--f-head);letter-spacing:.03em}
.sh-top .sg{width:14px;height:14px;color:var(--blue-2)}
.sh-top .mono{font:500 12px var(--f-mono);letter-spacing:0;color:#4A4F52}
.sh-top .aib{margin-left:auto}
.sh-body{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:start}
.sh-plan{align-self:stretch;min-height:0;display:flex;flex-direction:column;gap:6px}
.sh-plan .plan{flex:1;min-height:0}
.sh-plan p{margin:0;font:400 11px var(--f-mono);color:#4A4F52}
.stamp{display:grid;grid-template-columns:1.4fr 1fr .6fr .6fr;margin:10px -16px 0;border-top:1px solid rgba(34,31,32,.45);font:400 11px var(--f-mono)}
.stamp span{padding:6px 8px;border-left:1px solid rgba(34,31,32,.25)}
.stamp span:first-child{border-left:0;font-weight:600}
.stamp em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#7A7F83}

/* ============ ЭКРАН 4 — возможности (графит) ============ */
.en4{position:relative;background-color:var(--graphite);color:var(--sand);padding:var(--sp-t) 0 var(--sp);overflow:hidden}
.en4-body{display:grid;grid-template-columns:minmax(280px,.75fr) 1.25fr;gap:clamp(32px,5vw,90px);align-items:start;margin-top:40px;padding:0 var(--pad)}
.en4 .en-text{color:var(--grey)}
.mon{max-width:650px}
.mon-in{flex:1;display:grid;grid-template-columns:1.3fr 1fr;min-height:0}
.mon-in .plan-box{padding:12px;border-right:1px solid var(--line-dk)}
.mon-doc{padding:14px 12px;overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font:400 11.5px var(--f-mono)}
.tbl th{padding:6px 6px;text-align:left;font-weight:500;color:var(--ink);background:var(--blue)}
.tbl th:first-child{border-radius:6px 0 0 6px}.tbl th:last-child{border-radius:0 6px 6px 0}
.tbl td{padding:6px;border-bottom:1px solid var(--line-dk);color:var(--sand)}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl tr.l td{color:#D29C86}
.tl{position:relative;margin:4px 0 0;padding:0 0 0 18px;list-style:none}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:repeating-linear-gradient(var(--grey) 0 3px,transparent 3px 6px)}
.tl li{position:relative;padding:5px 0 8px;font:500 12px/1.4 var(--f-text)}
.tl li::before{content:"";position:absolute;left:-17px;top:9px;width:9px;height:9px;border-radius:50%;background:#2B2829;box-shadow:inset 0 0 0 1.5px var(--grey)}
.tl li.cur::before{background:var(--blue);box-shadow:none}
.tl li span{display:block;font:400 11px var(--f-mono);color:var(--grey)}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp2 div{padding:9px 10px;border-radius:8px;background:#343132;box-shadow:0 0 0 1px var(--line-dk);font:400 11.5px/1.5 var(--f-mono)}
.cmp2 div b{display:block;margin-bottom:4px;font:600 12px var(--f-text)}
.cmp2 .bad{box-shadow:0 0 0 1.5px var(--brown);color:#D29C86}
.dev-b{display:inline-block;margin-bottom:10px;padding:4px 8px;border-radius:7px;font:500 11px var(--f-mono);box-shadow:inset 0 0 0 1px var(--grey);color:var(--grey)}
/* размерные линии за курсором (только десктоп) */
.xhair{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:0}
.xhair.on{opacity:1}
.xh-h,.xh-v{position:absolute;display:block}
.xh-h{left:0;right:0;height:0;border-top:1px dashed rgba(71,159,248,.35)}
.xh-v{top:0;bottom:0;width:0;border-left:1px dashed rgba(71,159,248,.35)}
.xh-t{position:absolute;font-size:11px;color:var(--blue);white-space:nowrap;transform:translate(10px,8px)}
.en4>*:not(.xhair){position:relative;z-index:1}

/* ============ ЭКРАН 5 — как работает: кейс (светлый) ============ */
.en5{background-color:var(--sand);color:var(--ink);padding:var(--sp-t) var(--pad) calc(var(--sp) / 2)}
.en5-head{margin-bottom:44px}
.en5-grid{display:grid;grid-template-columns:minmax(320px,.85fr) 1.15fr;gap:clamp(32px,5vw,90px);align-items:start}
.en5 .en-h2{font-size:clamp(24px,2.3vw,38px);max-width:none}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--line-l)}
.steps li{position:relative;padding:14px 0 14px 18px;border-bottom:1px solid var(--line-l);cursor:pointer;outline:none}
.steps li::before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;border-radius:50%;background:rgba(34,31,32,.3);transition:background .3s,box-shadow .3s}
.steps li b{display:flex;align-items:center;gap:12px;font:600 15px var(--f-text)}
.steps li b .mono{font-size:13px;font-weight:400;color:var(--steel)}
.steps li p{max-height:0;margin:0;overflow:hidden;font-size:13px;line-height:1.6;color:#3A3F42;transition:max-height .45s,margin .45s}
.steps li.on::before{background:var(--blue);box-shadow:0 0 0 4px rgba(71,159,248,.25)}
.steps li.on b .mono{color:var(--blue-2)}
.steps li.on p{max-height:6em;margin-top:8px}
.steps li.done::before{background:var(--ink)}
.case .pn-bar .tagc{margin-left:10px}
.case-in{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.pages{position:relative;padding:16px;border-right:1px solid var(--line-l)}
.pg{position:absolute;width:var(--w);height:var(--h);left:var(--x);top:var(--y);border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(34,31,32,.16),0 6px 12px -8px rgba(34,31,32,.4);
  transition:left .7s cubic-bezier(.2,.7,.2,1),top .7s cubic-bezier(.2,.7,.2,1),width .7s,height .7s,opacity .5s,box-shadow .4s,transform .7s;overflow:hidden}
.pg i{position:absolute;left:12%;right:12%;height:2px;border-radius:1px;background:rgba(34,31,32,.14)}
.pg .mk{position:absolute;left:10%;right:30%;height:5px;border-radius:2px;opacity:0;transition:opacity .4s}
.pg.ai .mk{opacity:1;background:rgba(71,159,248,.45)}
.pg.ow .mk{opacity:1;background:rgba(160,112,95,.5)}
.pg.ok{box-shadow:0 0 0 1.5px var(--pe-g),0 6px 12px -8px rgba(34,31,32,.4)}
.pg.gone{opacity:0;transform:scale(.6)}
.pg.out{box-shadow:0 0 0 1.5px var(--blue),0 18px 30px -16px rgba(34,31,32,.5)}
.pg .fmt{position:absolute;right:6px;bottom:6px;padding:2px 5px;border-radius:4px;font:600 9.5px var(--f-mono);color:#fff;background:var(--ink)}
.pg .pgn{position:absolute;left:8px;top:6px;font:500 9.5px var(--f-mono);color:var(--steel)}
.case-doc{padding:16px 16px 0;overflow:hidden}
.cd-n{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2)}
.cd-h{margin:0 0 6px;font:600 16px/1.3 var(--f-text)}
.cd-d{margin:0 0 12px;font-size:12px;line-height:1.55;color:#4A4F52;min-height:3.1em}
.case-foot{flex:none;display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 14px;border-top:1px solid var(--line-l)}
.case-k{font-size:13px;color:var(--steel)}
.arr2{display:flex;gap:6px}
.arr2 button{width:40px;height:30px;border:0;border-radius:8px;background:rgba(34,31,32,.08);color:var(--ink);font:500 15px var(--f-text);cursor:pointer;transition:background .3s,color .3s}
.arr2 button[data-d="1"]{background:var(--ink);color:var(--blue)}
.arr2 button:hover{background:var(--blue);color:var(--ink)}
.arr2 button:disabled{opacity:.35;pointer-events:none}
.big{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;max-width:650px;margin:22px 0 0 auto}
.big-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--line-l);text-align:center}
.big-c b{font:600 clamp(34px,3.2vw,52px)/1 var(--f-mono);color:var(--ink)}
.big-c.on b{color:var(--blue-2)}
.big-c span{font:600 13px var(--f-text)}
.big-c em{font-style:normal;font-size:12px;color:var(--steel)}
.big-arr{position:relative;height:2px;margin:0 10px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 10px);background-size:20px 2px;animation:flow 1s linear infinite}
.big-arr::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--blue);border-right:0}
@keyframes flow{to{background-position:20px 0}}
.big-t{max-width:650px;margin:16px 0 0 auto;font-size:14px;line-height:1.75;min-height:3.5em;text-align:left}
.big-t .hl{background:var(--blue);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:2px 5px}
.big-t .caret{background:var(--ink)}

/* ============ ЭКРАН 6 — передать задачу (графит) ============ */
.en6{background-color:var(--graphite);color:var(--sand);padding:var(--sp-t) var(--pad) 44px;border-bottom:1px solid var(--line-dk)}
.en6-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);align-items:start}
.en6 .en-lead{margin-bottom:36px;max-width:48ch}
.en6-btn{min-width:340px;justify-content:space-between}
.en6 .btn-fill{background:var(--blue);border-color:var(--blue);color:var(--graphite)}
.en6 .btn-fill:hover{background:#74B6FA}
.en6-r{padding-top:6px}
.en6-h{margin:0 0 18px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.en6-q{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-dk)}
.en6-q li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-dk);font:500 15px/1.4 var(--f-text);transition:color .3s}
.en6-q li:nth-child(odd){padding-right:16px}
.en6-q li:hover{color:var(--blue)}
.en6-q svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.en6-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;padding:22px;border-radius:14px;background:rgba(230,227,224,.04);box-shadow:inset 0 0 0 1px var(--line-dk)}
.en6-form[hidden]{display:none}
.en6-form label,.en6-form fieldset{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.en6-form .wide{grid-column:1 / -1}
.en6-form .mono{font-size:13px;letter-spacing:.06em;color:var(--grey)}
.en6-form legend{padding:0;margin-bottom:8px}
.en6-form input:not([type=checkbox]){font:500 15px var(--f-text);color:var(--sand);background:transparent;border:0;border-bottom:1px solid rgba(230,227,224,.3);padding:8px 0;outline:none}
.en6-form input:focus{border-bottom-color:var(--blue)}
.en6-form input::placeholder{color:rgba(177,180,188,.5)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{flex-direction:row;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{padding:7px 12px;border-radius:8px;font:500 13px var(--f-text);background:#2E2B2C;box-shadow:inset 0 0 0 1px var(--line-dk);transition:background .25s,color .25s}
.chips label:hover span{box-shadow:inset 0 0 0 1px var(--blue)}
.chips input:checked+span{background:var(--blue);color:var(--ink)}
.en6-file{position:relative}
.en6-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.en6-file em{display:flex;align-items:center;gap:10px;padding:14px;border-radius:10px;border:1px dashed rgba(71,159,248,.5);font:400 13px var(--f-mono);font-style:normal;color:var(--grey);transition:background .3s}
.en6-file em i{font-style:normal}
.en6-file:hover em{background:rgba(71,159,248,.08);color:var(--sand)}
.en6-file svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round}
.en6-form .btn{grid-column:1 / -1;justify-content:space-between}
.en6-ok{grid-column:1 / -1;margin:0;font-size:13px;color:var(--blue)}
.en6-form.open{animation:formIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes formIn{from{opacity:0;transform:translateY(10px)}}

/* подвал: текущий сайт в списке системы — синим */
.s5-cur{color:var(--blue)!important}
.s5{padding-top:12px}

@media (max-width:1100px){
  .en2-grid,.en3-body,.en4-body,.en5-grid,.en6-grid{grid-template-columns:minmax(0,1fr)}
  .en2-grid>*,.en3-body>*,.en4-body>*,.en5-grid>*,.en6-grid>*{min-width:0}
  .en2-text{border-right:0;border-bottom:1px solid var(--line-l)}
  .en2-stage{align-items:center}
  .pn,.set,.big,.big-t{margin-left:auto;margin-right:auto}
}
@media (max-width:720px){
  :root{--sp:52px}
  .en-kick{font-size:13px}
  .en2-text{padding:var(--sp-t) var(--pad) 40px}
  .en2-title .aib-lg{right:-38px;width:26px;height:26px}
  .en2-stage{padding:32px var(--pad) var(--sp)}
  .en-net{display:none}
  .files{grid-template-columns:1fr}
  .file{transform:none}
  .pn,.set{aspect-ratio:auto}
  .ws-in,.mon-in,.case-in{grid-template-columns:1fr}
  .ws-in .plan-box,.mon-in .plan-box{border-right:0;border-bottom:1px solid var(--line-l);aspect-ratio:4 / 3}
  .mon-in .plan-box{border-bottom-color:var(--line-dk)}
  .pages{height:220px;border-right:0;border-bottom:1px solid var(--line-l)}
  .en-steps{grid-template-columns:repeat(4,max-content);overflow-x:auto;scrollbar-width:none}
  .en-tabs.t5,.en-tabs.t6{grid-template-columns:repeat(6,max-content);overflow-x:auto;scrollbar-width:none}
  .tb{font-size:10px;letter-spacing:.1em}
  .set{height:auto}
  .sheetx{position:relative;transform:none!important;display:none}
  .sheetx.on{display:block}
  .sh-in{position:relative;inset:auto;margin:12px}
  .sh-body{overflow:visible;grid-template-columns:minmax(0,1fr)}
  .sh-plan{height:200px}
  .stamp{grid-template-columns:1fr 1fr}
  .en-note-r{text-align:left}
  .big{grid-template-columns:1fr;gap:10px}.big-arr{width:2px;height:30px;margin:0 auto;background:var(--blue)}
  .en6-btn{min-width:0;width:100%}
  .en6-q,.en6-form{grid-template-columns:1fr}
  .s5-grid{grid-template-columns:1fr}
  .s5-col+.s5-col{padding-left:0;border-left:0}
  .xhair{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv,.en2-text>*{opacity:1!important;transform:none!important}
  .en2-title .tx{opacity:1}
  .q{animation:none;opacity:1;transform:none}
  .aib::after,.plan .hl,.plan .pin .ring,.en-net .run,.big-arr{animation:none}
}
.plan .ghost rect{fill:none!important;stroke:var(--blue)}

/* тексты слева — вровень с верхом рабочей панели */
.en4-copy{padding-top:6px}
.en3-copy{margin-top:-48px}  /* вровень с верхним краем стопки листов (4 листа × 12px) */
@media (max-width:1100px){.en3-body{margin-top:60px}.en3-copy{margin-top:0}}
@media (max-width:720px){.en5-head br{display:none}.en3-body{margin-top:32px}}
/* «Результат:» — как на KAR Supply: подпись слева, текст набирается машинкой на сплошной синей полосе */
.en2-res{padding:0;border:0;background:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;max-width:52ch;min-height:3.4em;margin-bottom:30px}
.en2-res b{margin:0;font:600 clamp(14px,.95vw,15px)/1.6 var(--f-text);white-space:nowrap}
.en-rt{flex:1;min-width:24ch;font-size:clamp(13px,.95vw,15px);line-height:1.75;color:var(--ink)}
.en-rt .hl{background:var(--blue);padding:2px 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.en-rt .hl:empty{padding:0}
.en-rt .caret{background:var(--ink)}
/* легенда жил — справа, под шкалой этапов */
.en2-foot{position:relative;z-index:1;width:100%;max-width:650px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap;margin-top:6px}
.en2-foot .wires{margin:0;gap:6px 16px}
.en2-foot .en-note{margin:0}
.pn-bar b,.sh-top{white-space:nowrap}
@media (max-width:720px){ .case .pn-path{display:none} .case .pn-bar .tagc{margin-left:auto} .en-ws .pn-path,.mon .pn-path{font-size:11px;white-space:normal;line-height:1.3} }
@media (max-width:720px){ .sh-top{white-space:normal;flex-wrap:wrap} }