/* анимации обработки по типу инструмента (static/js/anim.js) */
.proc-anim{width:160px;height:100px;margin:0 auto 10px;color:var(--accent);position:relative}
.proc-anim svg{display:block;overflow:visible}
.proc-anim:not(.ext) svg *{transform-box:fill-box;transform-origin:center}
.progress .proc-anim + .spinner{display:none}
@keyframes a-merge-l{0%,15%{transform:translateX(0);opacity:1}60%,100%{transform:translateX(45px);opacity:0}}
@keyframes a-merge-r{0%,15%{transform:translateX(0);opacity:1}60%,100%{transform:translateX(-45px);opacity:0}}
@keyframes a-merge-c{0%,50%{transform:scale(1)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.a-merge-l{animation:a-merge-l 2.2s ease-in-out infinite}
.a-merge-r{animation:a-merge-r 2.2s ease-in-out infinite}
.a-merge-c{animation:a-merge-c 2.2s ease-in-out infinite}
@keyframes a-split-l{0%,25%{transform:translateX(0);opacity:0}45%{opacity:1}100%{transform:translateX(-47px);opacity:1}}
@keyframes a-split-r{0%,25%{transform:translateX(0);opacity:0}45%{opacity:1}100%{transform:translateX(47px);opacity:1}}
@keyframes a-split-c{0%,25%{transform:scale(1)}45%{transform:scale(.92)}100%{transform:scale(.92)}}
.a-split-l{animation:a-split-l 2.2s ease-in-out infinite}
.a-split-r{animation:a-split-r 2.2s ease-in-out infinite}
.a-split-c{animation:a-split-c 2.2s ease-in-out infinite}
@keyframes a-press-top{0%,20%{transform:translateY(0)}55%,75%{transform:translateY(16px)}100%{transform:translateY(0)}}
@keyframes a-press-bot{0%,20%{transform:translateY(0)}55%,75%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes a-press-pg{0%,20%{transform:scaleY(1)}55%,75%{transform:scaleY(.55)}100%{transform:scaleY(1)}}
@keyframes a-press-puff{0%,45%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.3)}}
.a-press-top{animation:a-press-top 2.4s ease-in-out infinite}
.a-press-bot{animation:a-press-bot 2.4s ease-in-out infinite}
.a-press-pg{animation:a-press-pg 2.4s ease-in-out infinite}
.a-press-puff{animation:a-press-puff 2.4s ease-out infinite}
@keyframes a-rotate{0%,20%{transform:rotate(0)}30%,45%{transform:rotate(90deg)}55%,70%{transform:rotate(180deg)}80%,95%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
.a-rotate{animation:a-rotate 3.2s ease-in-out infinite}
@keyframes a-sh-1{0%,10%{transform:translate(0,0)}35%{transform:translate(47px,-14px)}60%,100%{transform:translate(94px,0)}}
@keyframes a-sh-3{0%,10%{transform:translate(0,0)}35%{transform:translate(-47px,14px)}60%,100%{transform:translate(-94px,0)}}
@keyframes a-sh-2{0%,10%,60%,100%{transform:scale(1)}35%{transform:scale(.9)}}
.a-sh-1{animation:a-sh-1 2.6s ease-in-out infinite alternate}
.a-sh-2{animation:a-sh-2 2.6s ease-in-out infinite alternate}
.a-sh-3{animation:a-sh-3 2.6s ease-in-out infinite alternate}
@keyframes a-lock{0%,35%{transform:translateY(0)}55%,80%{transform:translateY(-12px)}100%{transform:translateY(0)}}
.a-lock-shackle{animation:a-lock 2.2s ease-in-out infinite}
@keyframes a-stamp{0%,20%{transform:translateY(0)}45%{transform:translateY(34px)}55%{transform:translateY(31px)}70%{transform:translateY(34px)}100%{transform:translateY(0)}}
@keyframes a-stamp-mark{0%,45%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
.a-stamp{animation:a-stamp 2.4s ease-in-out infinite}
.a-stamp-mark{animation:a-stamp-mark 2.4s ease-in-out infinite}
@keyframes a-scan{0%{transform:translateY(0);opacity:.2}10%{opacity:.95}90%{opacity:.95}100%{transform:translateY(58px);opacity:.2}}
.a-scan-bar{animation:a-scan 1.8s ease-in-out infinite alternate}
@keyframes a-crop{0%,20%{transform:scale(1)}60%,80%{transform:scale(.66)}100%{transform:scale(1)}}
.a-crop{animation:a-crop 2.4s ease-in-out infinite}
@keyframes a-wrench{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(22deg)}}
.a-wrench{animation:a-wrench 1.2s ease-in-out infinite;transform-origin:50% 20%}
@keyframes a-gray{0%,30%{opacity:0}70%,100%{opacity:1}}
.a-gray-over{animation:a-gray 2.4s ease-in-out infinite alternate}
@keyframes a-layer-3{0%,25%{transform:translateY(0)}70%,100%{transform:translateY(40px)}}
@keyframes a-layer-2{0%,25%{transform:translateY(0)}70%,100%{transform:translateY(20px)}}
.a-layer-3{animation:a-layer-3 2.2s ease-in-out infinite alternate}
.a-layer-2{animation:a-layer-2 2.2s ease-in-out infinite alternate}
.proc-anim .flip{width:96px;height:72px;margin:14px auto 0;position:relative;transform-style:preserve-3d;animation:a-flip 3s ease-in-out infinite}
.proc-anim .face{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;letter-spacing:1px;backface-visibility:hidden;border:3px solid var(--accent);color:var(--accent);background:#fff}
.proc-anim .face.back{transform:rotateY(180deg);background:var(--accent);color:#fff}
@keyframes a-flip{0%,30%{transform:perspective(500px) rotateY(0)}55%,85%{transform:perspective(500px) rotateY(180deg)}100%{transform:perspective(500px) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.proc-anim *{animation:none!important}}

/* этап «Загружаем файл…» после выбора файла */
.upload-panel{display:none;text-align:center;padding:26px}
.upload-panel .up-label{font-weight:600;margin-top:2px}
.upload-panel .pbar{max-width:360px;margin:12px auto 0}
.upload-panel .up-info{color:var(--muted);font-size:13px;margin-top:8px}
@keyframes a-up-pg{0%{transform:translateY(14px);opacity:0}15%{opacity:1}75%{transform:translateY(-40px);opacity:1}100%{transform:translateY(-52px);opacity:0}}
.a-up-pg{animation:a-up-pg 1.9s ease-in-out infinite}
@keyframes a-up-dash{to{stroke-dashoffset:-20}}
.a-up-dash{animation:a-up-dash 1s linear infinite}