/* SNP UI — общие правила иконок и микро-взаимодействий для сайта, админки и кабинетов (подключается везде после основных стилей).
   Размеры: меню 20px · действия 18px · таблицы 16px · индикаторы 14px. Линия 1.75. Анимации короткие (120–200 мс), уважают prefers-reduced-motion. */
:root{--snp-i-ease:cubic-bezier(.2,.7,.2,1);--snp-ok:#1e8e5a;--snp-warn:#d99a00;--snp-bad:#d64545;--snp-info:#2f6fdd;--snp-violet:#7a5af5}
:where(.snp-i){display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.snp-i{transition:transform .18s var(--snp-i-ease),color .15s,opacity .15s}
.snp-i.sz-14{width:14px;height:14px}.snp-i.sz-16{width:16px;height:16px}.snp-i.sz-18{width:18px;height:18px}.snp-i.sz-20{width:20px;height:20px}.snp-i.sz-22{width:22px;height:22px}
/* бывшие эмодзи в тексте интерфейса */
:where(.snp-ei){width:1.05em;height:1.05em;margin-right:.3em;vertical-align:-.16em;opacity:.9}
.snp-dot{display:inline-block;width:.6em;height:.6em;margin-right:.4em;border-radius:50%;vertical-align:.05em;background:currentColor;box-shadow:0 0 0 2px #ffffffcc}
.snp-dot-ok{background:var(--snp-ok)}.snp-dot-warn{background:var(--snp-warn)}.snp-dot-bad{background:var(--snp-bad)}.snp-dot-info{background:var(--snp-info)}.snp-dot-violet{background:var(--snp-violet)}.snp-dot-off{background:#c9c7bf}.snp-dot-dark{background:#3a3d3c}
/* иконка в кнопках: лёгкое движение при наведении, отклик при нажатии */
button .snp-i,a .snp-i,.btn .snp-i{pointer-events:none}
.btn:hover .i-arrow-right,a:hover>.i-arrow-right,a:hover .i-chevron-right{transform:translateX(2px)}
.btn:hover .i-download{transform:translateY(1px)}.btn:hover .i-upload{transform:translateY(-1px)}
.btn:hover .i-plus,button:hover>.i-plus{transform:rotate(90deg)}
.btn:hover .i-refresh-cw,button:hover>.i-refresh-cw{transform:rotate(60deg)}
.btn:hover .i-trash-2,button:hover>.i-trash-2{transform:translateY(-1px) rotate(-6deg)}
.btn:hover .i-heart,button:hover>.i-heart{transform:scale(1.12)}
:where(.btn,button){transition:transform .12s var(--snp-i-ease),background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:active:not(:disabled),button.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
button:disabled .snp-i,.btn[disabled] .snp-i{opacity:.45}
.i-loader-circle,.snp-spin{animation:snp-spin .8s linear infinite}
@keyframes snp-spin{to{transform:rotate(360deg)}}
/* счётчики: появление */
.bdg,.badge,em.bdg,.mx-cnt,.cnt-b{animation:snp-pop .32s var(--snp-i-ease)}
@keyframes snp-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
/* раскрывающиеся списки и диалоги — плавно */
details>summary{cursor:pointer}
details[open]>*:not(summary){animation:snp-fade .18s var(--snp-i-ease)}
.mp,.dlg,.modal,.mx-dlgb,dialog[open]{animation:snp-rise .2s var(--snp-i-ease)}
@keyframes snp-fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes snp-rise{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
/* скелетон загрузки */
.snp-skel{position:relative;overflow:hidden;background:#ECEAE3;border-radius:8px;color:transparent!important}
.snp-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffff8c,transparent);animation:snp-shim 1.2s infinite}
@keyframes snp-shim{to{transform:translateX(100%)}}
:focus-visible{outline-offset:2px}
@media (prefers-reduced-motion:reduce){.snp-i,.btn,button,.bdg,.badge,.mp,.dlg,.mx-dlgb,details[open]>*{animation:none!important;transition:none!important}.snp-skel::after{animation:none}}