/* RADMIR Control Center • Motion Pro pack v8.4.5
   Дополнительная анимационная система: вход, переход в приложение,
   страницы, карточки, таблицы и интерактивный световой отклик. */

:root{
  --mp-ease:cubic-bezier(.22,1,.36,1);
  --mp-spring:cubic-bezier(.2,1.25,.35,1);
  --mp-accent:var(--ui-accent,#e8a23a);
}

/* ───────────────────────────── LOGIN ───────────────────────────── */
html[data-motion="full"] .lg2 .lg-bg::after{
  content:"";position:absolute;inset:-28%;pointer-events:none;opacity:.42;
  background:conic-gradient(from 190deg at 50% 50%,transparent 0 11%,rgba(246,193,92,.055) 17%,transparent 27% 46%,rgba(201,116,28,.05) 54%,transparent 65% 82%,rgba(246,193,92,.04) 90%,transparent);
  filter:blur(10px);animation:mpLoginOrbit 34s linear infinite;
}
html[data-motion="full"] .lg2 .lg-grid{animation:mpGridFloat 18s ease-in-out infinite alternate!important}
html[data-motion="full"] .lg2 .lg-emblem{filter:drop-shadow(0 0 0 rgba(232,162,58,0));animation:mpEmblemGlow 4.6s ease-in-out 1.55s infinite}

html:not([data-motion="off"]) .lg2 .lg-h,
html:not([data-motion="off"]) .lg2 .lg-tabs,
html:not([data-motion="off"]) .lg2 #loginForm>.lg-field,
html:not([data-motion="off"]) .lg2 #loginForm>.lg-error,
html:not([data-motion="off"]) .lg2 #loginForm>.lg-submit,
html:not([data-motion="off"]) .lg2 #vkLoginForm>.lg-vk-quick,
html:not([data-motion="off"]) .lg2 #vkLoginForm>.lg-vk-first-note,
html:not([data-motion="off"]) .lg2 #vkLoginForm>.lg-vk-step,
html:not([data-motion="off"]) .lg2 .lg-foot{
  animation:mpLoginItem .58s var(--mp-ease) both;
}
html:not([data-motion="off"]) .lg2 .lg-h{animation-delay:.82s}
html:not([data-motion="off"]) .lg2 .lg-tabs{animation-delay:.90s}
html:not([data-motion="off"]) .lg2 #loginForm>.lg-field:nth-child(1){animation-delay:.98s}
html:not([data-motion="off"]) .lg2 #loginForm>.lg-field:nth-child(2){animation-delay:1.06s}
html:not([data-motion="off"]) .lg2 #loginForm>.lg-error{animation-delay:1.10s}
html:not([data-motion="off"]) .lg2 #loginForm>.lg-submit{animation-delay:1.14s}
html:not([data-motion="off"]) .lg2 #vkLoginForm>.lg-vk-quick,
html:not([data-motion="off"]) .lg2 #vkLoginForm>.lg-vk-first-note,
html:not([data-motion="off"]) .lg2 #vkLoginForm>.lg-vk-step{animation-delay:.98s}
html:not([data-motion="off"]) .lg2 .lg-foot{animation-delay:1.22s}

html[data-motion="lite"] .lg2 .lg-h,
html[data-motion="lite"] .lg2 .lg-tabs,
html[data-motion="lite"] .lg2 #loginForm>.lg-field,
html[data-motion="lite"] .lg2 #loginForm>.lg-error,
html[data-motion="lite"] .lg2 #loginForm>.lg-submit,
html[data-motion="lite"] .lg2 #vkLoginForm>* ,
html[data-motion="lite"] .lg2 .lg-foot{animation-duration:.28s!important;animation-delay:.10s!important}

/* spotlight поверх login-panel, координаты задаёт motion-pro.js */
.lg2 .lg-panel{overflow:hidden}
.motion-surface-light{
  position:absolute;inset:0;z-index:8;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(290px circle at var(--mp-x,50%) var(--mp-y,50%),rgba(246,193,92,.115),rgba(246,193,92,.035) 34%,transparent 72%);
  transition:opacity .28s ease;
}
html[data-motion="full"] .motion-surface:hover>.motion-surface-light{opacity:1}
html[data-motion="lite"] .motion-surface:hover>.motion-surface-light{opacity:.38}
html[data-scheme="light"] .motion-surface-light{background:radial-gradient(280px circle at var(--mp-x,50%) var(--mp-y,50%),rgba(139,91,25,.08),transparent 70%)}

/* Успешный вход: интерфейс не исчезает резко, а "уступает" место кабинету. */
html:not([data-motion="off"]) .lg.motion-login-success .lg-brand{animation:mpLoginBrandOut .42s var(--mp-ease) both!important}
html:not([data-motion="off"]) .lg.motion-login-success .lg-panel{animation:mpLoginPanelOut .42s var(--mp-ease) both!important}
html:not([data-motion="off"]) .lg.motion-login-success .lg-bg{animation:mpLoginBgOut .5s ease both}
.motion-login-flare{
  position:fixed;left:50%;top:50%;z-index:30;width:12px;height:12px;border-radius:999px;pointer-events:none;
  background:rgba(246,193,92,.62);box-shadow:0 0 45px 18px rgba(232,162,58,.2);
  transform:translate(-50%,-50%) scale(.1);opacity:0;animation:mpLoginFlare .52s var(--mp-ease) both;
}

/* ────────────────────────── SHELL / APP ENTER ────────────────────────── */
html:not([data-motion="off"]) .motion-shell-enter .lc-sidebar{animation:mpSidebarIn .68s var(--mp-ease) both}
html:not([data-motion="off"]) .motion-shell-enter .lc-topbar{animation:mpTopbarIn .62s var(--mp-ease) .08s both}
html:not([data-motion="off"]) .motion-shell-enter .lc-nav .lc-group{animation:mpNavGroupIn .52s var(--mp-ease) both;animation-delay:calc(.16s + var(--mp-group-i,0)*55ms)}
html:not([data-motion="off"]) .motion-shell-enter .lc-user{animation:mpNavGroupIn .52s var(--mp-ease) .38s both}
html:not([data-motion="off"]) .motion-shell-enter #page{animation:mpAppPageIn .66s var(--mp-ease) .18s both}
html[data-motion="lite"] .motion-shell-enter :is(.lc-sidebar,.lc-topbar,.lc-nav .lc-group,.lc-user,#page){animation-duration:.28s!important;animation-delay:0s!important}

/* Пункты меню ощущаются живее, но геометрия не прыгает. */
html:not([data-motion="off"]) .lc-item .lc-ico,
html:not([data-motion="off"]) .lc-item .lc-dot,
html:not([data-motion="off"]) .lc-group-head .lc-gico{
  transition:transform .22s var(--mp-spring),filter .22s ease;
}
html[data-motion="full"] .lc-item:hover .lc-ico,
html[data-motion="full"] .lc-group-head:hover .lc-gico{transform:translateX(2px) scale(1.08);filter:drop-shadow(0 0 8px rgba(232,162,58,.24))}
html[data-motion="full"] .lc-item:hover .lc-dot{transform:scale(1.24);filter:drop-shadow(0 0 6px currentColor)}
html:not([data-motion="off"]) .lc-item.active .lc-ico{animation:mpNavActive .36s var(--mp-spring)}

/* ───────────────────────────── PAGES ───────────────────────────── */
html:not([data-motion="off"]) .page.page-enter>*{
  animation:mpSectionIn .44s var(--mp-ease) both!important;
  animation-delay:var(--mp-section-delay,0ms)!important;
}
html[data-motion="lite"] .page.page-enter>*{animation-duration:.22s!important;filter:none!important}

html:not([data-motion="off"]) .page.page-enter .table tbody tr{
  animation:mpRowIn .34s var(--mp-ease) both!important;
  animation-delay:var(--mp-row-delay,0ms)!important;
}
html[data-motion="lite"] .page.page-enter .table tbody tr{animation-duration:.18s!important;animation-delay:0ms!important}

/* Карточки, которые появляются после фильтров/перерисовки, а не только при navigate(). */
html:not([data-motion="off"]) .motion-card-in{animation:mpCardIn .42s var(--mp-ease) both}
html[data-motion="lite"] .motion-card-in{animation-duration:.2s}

/* Световой отклик под курсором. Никаких 3D-наклонов — интерфейс остаётся рабочим. */
.motion-surface{position:relative}
.motion-surface>.motion-surface-light{z-index:20}
html[data-motion="full"] .motion-surface{transition:border-color .2s ease,box-shadow .28s ease,background-color .2s ease}
html[data-motion="full"] .motion-surface:hover{box-shadow:0 14px 36px rgba(0,0,0,.12)}
html[data-scheme="light"][data-motion="full"] .motion-surface:hover{box-shadow:0 13px 32px rgba(55,38,24,.08)}

/* Инпуты и кнопки — небольшое движение вместо резких состояний. */
html:not([data-motion="off"]) #page :is(.input,.select,.textarea),
html:not([data-motion="off"]) .modal :is(input,select,textarea){transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s var(--mp-ease)}
html[data-motion="full"] #page :is(.input,.select,.textarea):focus,
html[data-motion="full"] .modal :is(input,select,textarea):focus{transform:translateY(-1px)}
html:not([data-motion="off"]) :is(.btn,.icon-btn,.lc-bell,.lc-burger,.lc-collapse){transition:transform .16s var(--mp-spring),background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
html[data-motion="full"] :is(.btn,.icon-btn,.lc-bell,.lc-burger,.lc-collapse):hover:not(:disabled){transform:translateY(-1px)}
html[data-motion="full"] :is(.btn,.icon-btn,.lc-bell,.lc-burger,.lc-collapse):active:not(:disabled){transform:translateY(0) scale(.975)}

/* Modal: чуть более выразительное появление поверх уже существующей логики. */
html[data-motion="full"] .modal-backdrop.open .modal{animation:mpModalSettle .34s var(--mp-spring) both}

/* ─────────────────────────── KEYFRAMES ─────────────────────────── */
@keyframes mpLoginOrbit{to{transform:rotate(360deg) scale(1.025)}}
@keyframes mpGridFloat{from{transform:translate3d(-6px,-4px,0);opacity:.78}to{transform:translate3d(8px,7px,0);opacity:1}}
@keyframes mpEmblemGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(232,162,58,0))}50%{filter:drop-shadow(0 0 18px rgba(232,162,58,.28))}}
@keyframes mpLoginItem{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mpLoginBrandOut{to{opacity:0;transform:translateX(-30px) scale(.985);filter:blur(5px)}}
@keyframes mpLoginPanelOut{to{opacity:0;transform:translateX(34px) scale(.985);filter:blur(5px)}}
@keyframes mpLoginBgOut{to{opacity:.28;transform:scale(1.04)}}
@keyframes mpLoginFlare{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}35%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(32)}}
@keyframes mpSidebarIn{from{opacity:0;transform:translateX(-28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mpTopbarIn{from{opacity:0;transform:translateY(-16px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mpNavGroupIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes mpAppPageIn{from{opacity:0;transform:translateY(12px) scale(.992);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mpNavActive{0%{transform:scale(.84)}70%{transform:scale(1.12)}100%{transform:none}}
@keyframes mpSectionIn{from{opacity:0;transform:translateY(11px) scale(.996);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mpRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mpCardIn{from{opacity:0;transform:translateY(9px) scale(.992)}to{opacity:1;transform:none}}
@keyframes mpModalSettle{0%{opacity:0;transform:translateY(16px) scale(.965)}70%{transform:translateY(-2px) scale(1.004)}100%{opacity:1;transform:none}}

@media(max-width:900px){
  html:not([data-motion="off"]) .lg.motion-login-success .lg-brand{animation:mpLoginBrandOutMobile .32s var(--mp-ease) both!important}
  html:not([data-motion="off"]) .lg.motion-login-success .lg-panel{animation:mpLoginPanelOutMobile .32s var(--mp-ease) both!important}
  .motion-surface-light{display:none}
}
@keyframes mpLoginBrandOutMobile{to{opacity:0;transform:translateY(-16px);filter:blur(4px)}}
@keyframes mpLoginPanelOutMobile{to{opacity:0;transform:translateY(18px);filter:blur(4px)}}

@media(prefers-reduced-motion:reduce){
  .motion-login-flare{display:none!important}
  .motion-surface-light{display:none!important}
}

/* ======================================================================
   INNER MOTION v8.4.3 • рабочее пространство после входа
   Переходы страниц, навигация, списки, модалки и микроинтеракции.
   ====================================================================== */

/* Старая страница успевает мягко уйти до отрисовки нового раздела. */
html:not([data-motion="off"]) #page.mp-page-leave{
  pointer-events:none;
  animation:mpPageLeave .13s cubic-bezier(.4,0,1,1) both!important;
}
html[data-motion="lite"] #page.mp-page-leave{animation-duration:.07s!important}

/* Новая страница раскрывается слоями, а не одной плоской вспышкой. */
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive{
  animation:mpPageCanvasIn .38s var(--mp-ease) both;
}
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive>*{
  animation-name:mpSectionInStrong!important;
  animation-duration:.48s!important;
  animation-timing-function:var(--mp-ease)!important;
  animation-fill-mode:both!important;
}
html[data-motion="lite"] #page.page-enter.mp-page-arrive{animation-duration:.18s!important}
html[data-motion="lite"] #page.page-enter.mp-page-arrive>*{animation-duration:.22s!important}

/* Тонкий световой след сверху подчёркивает смену раздела. */
#page{position:relative}
#page>.mp-route-sheen{
  position:absolute;z-index:40;left:8%;right:8%;top:-2px;height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(246,193,92,.6),rgba(255,238,203,.95),rgba(246,193,92,.6),transparent);
  filter:drop-shadow(0 0 8px rgba(232,162,58,.34));transform:scaleX(.15);transform-origin:center;
}
html[data-motion="full"] #page.page-enter>.mp-route-sheen{animation:mpRouteSheen .72s var(--mp-ease) both}

/* ───── Sidebar ───── */
html:not([data-motion="off"]) .lc-group.mp-group-open .lc-group-inner>.lc-item{
  animation:mpNavChildIn .3s var(--mp-ease) both;
  animation-delay:calc(var(--mp-i,0) * 28ms);
}
html[data-motion="lite"] .lc-group.mp-group-open .lc-group-inner>.lc-item{animation-duration:.16s!important;animation-delay:0ms!important}

html[data-motion="full"] .lc-item{position:relative;overflow:hidden}
html[data-motion="full"] .lc-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.035) 46%,rgba(246,193,92,.075) 58%,transparent 78%);
  transform:translateX(-115%);transition:opacity .18s ease;
}
html[data-motion="full"] .lc-item:hover::after{opacity:1;animation:mpNavSheen .58s ease both}
html[data-motion="full"] .lc-item.mp-nav-selected{animation:mpNavSelected .34s var(--mp-spring) both}
html[data-motion="full"] .lc-item.mp-nav-selected .lc-label{animation:mpNavLabel .34s var(--mp-ease) both}

/* Логотип и пользовательская зона слегка отвечают на наведение. */
html:not([data-motion="off"]) .lc-emblem svg{transition:transform .3s var(--mp-spring),filter .3s ease}
html[data-motion="full"] .lc-brand.has-menu:hover .lc-emblem svg{transform:rotate(-3deg) scale(1.045);filter:drop-shadow(0 5px 14px rgba(232,162,58,.32))}
html:not([data-motion="off"]) .lc-avatar{transition:transform .22s var(--mp-spring),box-shadow .22s ease,border-color .22s ease}
html[data-motion="full"] .lc-user-main:hover .lc-avatar{transform:scale(1.055);box-shadow:0 0 0 3px rgba(232,162,58,.07)}

/* Breadcrumbs получают короткую смену состояния при переходе. */
html:not([data-motion="off"]) .lc-crumbs.mp-crumbs-change>*{animation:mpCrumbIn .26s var(--mp-ease) both;animation-delay:calc(var(--mp-i,0)*30ms)}

/* Раскрывающиеся меню и поисковые результаты. */
html:not([data-motion="off"]) .workspace-menu.open>button,
html:not([data-motion="off"]) .search-results:not(.hidden)>*,
html:not([data-motion="off"]) .period-menu:not(.hidden)>*{
  animation:mpMenuItemIn .26s var(--mp-ease) both;
  animation-delay:calc(var(--mp-i,0)*28ms);
}
html[data-motion="lite"] :is(.workspace-menu.open>button,.search-results:not(.hidden)>*,.period-menu:not(.hidden)>*){animation-duration:.14s!important;animation-delay:0ms!important}

/* ───── Карточки / панели ───── */
html:not([data-motion="off"]) #page .motion-surface{
  transition:translate .25s var(--mp-ease),border-color .2s ease,box-shadow .28s ease,background-color .2s ease;
}
html[data-motion="full"] #page .motion-surface:hover{translate:0 -2px}
html[data-motion="full"] #page .motion-surface:has(button:hover,input:hover,select:hover,textarea:hover,a:hover){translate:0 -1px}

/* Заголовки карточек слегка оживают отдельно от тела. */
html:not([data-motion="off"]) #page .motion-card-in :is(.card-head,.panel-title,.dashboard-panel-head,.org-command-head){animation:mpCardHeadIn .38s var(--mp-ease) both;animation-delay:.08s}

/* KPI/статы: цифра и иконка приходят с разной фазой. */
html:not([data-motion="off"]) #page :is(.dash-stat,.stat,.leader-kpi,.leader-month-card).motion-card-in :is(b,.num,strong){animation:mpMetricPop .42s var(--mp-spring) both;animation-delay:.1s}
html:not([data-motion="off"]) #page :is(.dash-stat,.stat,.leader-kpi,.leader-month-card).motion-card-in :is(.dash-stat-icon,.leader-kpi-icon,.month-icon,.ui-icon){animation:mpMetricIcon .42s var(--mp-spring) both;animation-delay:.06s}

/* Таблицы — появление строк и более читаемый hover. */
html[data-motion="full"] .table tbody tr:hover{box-shadow:inset 2px 0 0 color-mix(in srgb,var(--mp-accent) 72%,transparent)}
html[data-motion="full"] .table tbody tr:hover td:first-child{transform:translateX(2px)}
.table tbody td{transition:transform .18s var(--mp-ease),color .18s ease}

/* Новые строки/карточки, добавленные без полной перерисовки страницы. */
html:not([data-motion="off"]) .mp-item-in{animation:mpDynamicItemIn .34s var(--mp-ease) both;animation-delay:calc(var(--mp-i,0)*24ms)}
html[data-motion="lite"] .mp-item-in{animation-duration:.17s!important;animation-delay:0ms!important}

/* Badge/status — маленький pop при динамическом появлении. */
html:not([data-motion="off"]) .badge.mp-status-in,
html:not([data-motion="off"]) .status-chip.mp-status-in{animation:mpStatusIn .3s var(--mp-spring) both}

/* ───── Buttons / toggles ───── */
html[data-motion="full"] :is(.btn.primary,.pagination-btn,.period-arrow,.lc-bell,.icon-btn):focus-visible{
  animation:mpFocusPulse .6s var(--mp-ease) both;
}
html[data-motion="full"] .btn.primary:active:not(:disabled){box-shadow:0 0 0 4px rgba(232,162,58,.12),0 8px 22px rgba(0,0,0,.16)}

/* ───── Modal / drawer ───── */
html[data-motion="full"] .modal-backdrop.open{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
html:not([data-motion="off"]) .modal.mp-modal-sequence>*{animation:mpModalChildIn .32s var(--mp-ease) both;animation-delay:calc(70ms + var(--mp-i,0)*38ms)}
html:not([data-motion="off"]) .modal.mp-modal-sequence form>*{animation:mpModalChildIn .3s var(--mp-ease) both;animation-delay:calc(100ms + var(--mp-i,0)*32ms)}
html[data-motion="lite"] .modal.mp-modal-sequence>* ,html[data-motion="lite"] .modal.mp-modal-sequence form>*{animation-duration:.16s!important;animation-delay:0ms!important}
html:not([data-motion="off"]) .drawer-backdrop.open .drawer-body>*{animation:mpDrawerItemIn .3s var(--mp-ease) both;animation-delay:calc(var(--mp-i,0)*32ms)}

/* ───── Skeleton ───── */
html[data-motion="full"] .skeleton-page{animation:mpSkeletonIn .2s ease both}
html[data-motion="full"] .skeleton-page .shimmer::after{animation-duration:.9s}

/* ───── Keyframes внутреннего интерфейса ───── */
@keyframes mpPageLeave{to{opacity:0;transform:translateY(-5px) scale(.997);filter:blur(2px)}}
@keyframes mpPageCanvasIn{from{opacity:.15}to{opacity:1}}
@keyframes mpSectionInStrong{from{opacity:0;transform:translateY(15px) scale(.994);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mpRouteSheen{0%{opacity:0;transform:scaleX(.1)}35%{opacity:.9}100%{opacity:0;transform:scaleX(1)}}
@keyframes mpNavChildIn{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes mpNavSheen{to{transform:translateX(115%)}}
@keyframes mpNavSelected{0%{transform:translateX(-2px) scale(.985)}65%{transform:translateX(2px) scale(1.008)}100%{transform:none}}
@keyframes mpNavLabel{from{letter-spacing:.015em;opacity:.72}to{letter-spacing:normal;opacity:1}}
@keyframes mpCrumbIn{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
@keyframes mpMenuItemIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mpCardHeadIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes mpMetricPop{0%{opacity:.2;transform:translateY(6px) scale(.94)}70%{transform:translateY(-1px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes mpMetricIcon{0%{opacity:.1;transform:rotate(-7deg) scale(.88)}75%{transform:rotate(2deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes mpDynamicItemIn{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
@keyframes mpStatusIn{0%{opacity:0;transform:scale(.82)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes mpFocusPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,162,58,0)}45%{box-shadow:0 0 0 4px rgba(232,162,58,.13)}}
@keyframes mpModalChildIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mpDrawerItemIn{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
@keyframes mpSkeletonIn{from{opacity:0}to{opacity:1}}

@media(max-width:900px){
  html[data-motion="full"] #page .motion-surface:hover{translate:none}
  html[data-motion="full"] .table tbody tr:hover td:first-child{transform:none}
  #page>.mp-route-sheen{left:16px;right:16px}
}

@media(prefers-reduced-motion:reduce){
  #page>.mp-route-sheen{display:none!important}
}

html[data-motion="full"] .lc-layout.mp-sidebar-toggle .lc-main{animation:mpMainSettle .34s var(--mp-ease) both}
html[data-motion="lite"] .lc-layout.mp-sidebar-toggle .lc-main{animation:mpMainSettleLite .16s ease both}
html[data-motion="full"] #page.page-enter>.mp-route-sheen{animation:mpRouteSheen .72s var(--mp-ease) both!important;animation-delay:0ms!important;filter:drop-shadow(0 0 8px rgba(232,162,58,.34))!important}
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive>*:not(.mp-route-sheen){animation-name:mpSectionInStrong!important}
@keyframes mpMainSettle{0%{opacity:.82;transform:translateX(-4px)}100%{opacity:1;transform:none}}
@keyframes mpMainSettleLite{from{opacity:.9}to{opacity:1}}


/* ───────────────────── DASHBOARD MOTION v8.4.4 ─────────────────────
   Главная страница получает отдельную последовательность: приветствие → KPI →
   рабочие панели → строки → прогресс. Данные и компоновка не меняются. */
html:not([data-motion="off"]) .dx.mp-dashboard-ready .dx-head{
  animation:mpDxHeadIn .48s var(--mp-ease) both;
}
html:not([data-motion="off"]) .dx.mp-dashboard-ready .dx-head h2{
  position:relative;display:inline-block;
}
html[data-motion="full"] .dx.mp-dashboard-ready .dx-head h2::after{
  content:"";position:absolute;left:0;right:46%;bottom:-7px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--mp-accent),rgba(246,193,92,.16),transparent);
  transform:scaleX(0);transform-origin:left;opacity:0;
  animation:mpDxTitleLine .72s var(--mp-ease) .2s both;
}
html:not([data-motion="off"]) .dx.mp-dashboard-ready .dx-head-actions>*{
  animation:mpDxActionIn .34s var(--mp-ease) both;
}
html:not([data-motion="off"]) .dx.mp-dashboard-ready .dx-head-actions>*:nth-child(1){animation-delay:.10s}
html:not([data-motion="off"]) .dx.mp-dashboard-ready .dx-head-actions>*:nth-child(2){animation-delay:.16s}

/* KPI */
.dx .dx-kpi{position:relative;isolation:isolate;overflow:hidden}
.dx .dx-kpi::before{
  content:"";position:absolute;z-index:0;left:18px;right:18px;top:0;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--mp-accent),transparent);
  transform:scaleX(0);transform-origin:center;opacity:0;pointer-events:none;
}
.dx .dx-kpi::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(170px circle at var(--dx-x,50%) var(--dx-y,50%),rgba(246,193,92,.12),rgba(232,162,58,.035) 42%,transparent 72%);
  transition:opacity .24s ease;
}
.dx .dx-kpi>*{position:relative;z-index:1}
html[data-motion="full"] .dx .dx-kpi:hover::after{opacity:1}
html:not([data-motion="off"]) .dx.mp-dashboard-ready .mp-dx-kpi{
  opacity:0;transform:translateY(12px) scale(.982);
}
html:not([data-motion="off"]) .dx.mp-dashboard-go .mp-dx-kpi{
  animation:mpDxKpiIn .48s var(--mp-spring) both;
  animation-delay:calc(.12s + var(--dx-i,0)*62ms);
}
html[data-motion="full"] .dx.mp-dashboard-go .mp-dx-kpi::before{
  animation:mpDxKpiLine .58s var(--mp-ease) both;
  animation-delay:calc(.30s + var(--dx-i,0)*62ms);
}
html[data-motion="full"] .dx .dx-kpi:hover b{transform:translateY(-1px)}
.dx .dx-kpi b{transition:transform .2s var(--mp-spring),text-shadow .24s ease}
html[data-motion="full"] .dx .dx-kpi.hot b{animation:mpDxHotValue 1.8s ease-in-out 1.05s 2}
html[data-motion="full"] .dx .dx-kpi.hot::before{background:linear-gradient(90deg,transparent,var(--ui-accent-hi,#f6c15c),transparent)}

/* Панели и surface-light */
.dx .mp-dx-panel{position:relative;isolation:isolate}
.dx .mp-dx-panel::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(310px circle at var(--dx-x,50%) var(--dx-y,50%),rgba(246,193,92,.055),transparent 72%);
  transition:opacity .3s ease;
}
.dx .mp-dx-panel>*{position:relative;z-index:1}
html[data-motion="full"] .dx .mp-dx-panel:hover::after{opacity:1}
html:not([data-motion="off"]) .dx.mp-dashboard-ready .mp-dx-panel{
  opacity:0;transform:translateY(13px) scale(.993);
}
html:not([data-motion="off"]) .dx.mp-dashboard-go .mp-dx-panel{
  animation:mpDxPanelIn .5s var(--mp-ease) both;
  animation-delay:calc(.38s + var(--dx-panel-i,0)*70ms);
}

/* Очередь действий */
html:not([data-motion="off"]) .dx.mp-dashboard-ready .mp-dx-feed-row{
  opacity:0;transform:translateX(-9px);
}
html:not([data-motion="off"]) .dx.mp-dashboard-go .mp-dx-feed-row{
  animation:mpDxFeedIn .38s var(--mp-ease) both;
  animation-delay:calc(.52s + var(--dx-row-i,0)*38ms);
}
html[data-motion="full"] .dx .dx-item .dx-go{transition:transform .2s var(--mp-spring),color .18s ease}
html[data-motion="full"] .dx .dx-item:hover .dx-go{transform:translateX(3px)}
html[data-motion="full"] .dx .dx-timer.overdue .dx-dot{animation:mpDxOverdueDot 1.65s ease-in-out infinite}
html[data-motion="full"] .dx .dx-clear-mark{animation:mpDxClearMark .48s var(--mp-spring) .68s both}

/* Таблица организаций */
html:not([data-motion="off"]) .dx.mp-dashboard-ready .mp-dx-table-row{
  opacity:0;transform:translateY(7px);
}
html:not([data-motion="off"]) .dx.mp-dashboard-go .mp-dx-table-row{
  animation:mpDxTableRowIn .32s var(--mp-ease) both;
  animation-delay:calc(.66s + var(--dx-row-i,0)*28ms);
}
html[data-motion="full"] .dx .dx-row td:first-child{transition:transform .2s var(--mp-ease)}
html[data-motion="full"] .dx .dx-row:hover td:first-child{transform:translateX(3px)}
.dx .dx-bar u{
  position:relative;overflow:hidden;transition:width .82s var(--mp-ease)!important;
}
html[data-motion="full"] .dx .dx-bar u::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.34) 48%,transparent 78%);
  transform:translateX(-135%);
}
html[data-motion="full"] .dx.mp-dashboard-go .dx-bar u::after{animation:mpDxBarSheen .72s ease .92s both}

/* Рейтинги */
html[data-motion="full"] .dx .ranking-panel .rank-main i{position:relative;overflow:hidden}
html[data-motion="full"] .dx .ranking-panel .rank-main i u{transition:width .82s var(--mp-ease)!important}
html[data-motion="full"] .dx.mp-dashboard-go .mp-dx-rank-top .rank-num{animation:mpDxRankMedal .48s var(--mp-spring) both;animation-delay:calc(.72s + var(--dx-rank-i,0)*65ms)}
html[data-motion="full"] .dx .rank-row:hover .rank-num{transform:scale(1.06)}
.dx .rank-num{transition:transform .18s var(--mp-spring)}

/* Счётчик уведомлений: только короткий вход, без бесконечной тряски. */
html:not([data-motion="off"]) .dx.mp-dashboard-go .dx-count{animation:mpDxCountIn .42s var(--mp-spring) .34s both}

/* Упрощённый режим сохраняет последовательность, но делает её быстрой. */
html[data-motion="lite"] .dx.mp-dashboard-ready :is(.dx-head,.mp-dx-kpi,.mp-dx-panel,.mp-dx-feed-row,.mp-dx-table-row){animation-duration:.18s!important;animation-delay:0s!important}
html[data-motion="lite"] .dx .dx-bar u{transition-duration:.32s!important}
html[data-motion="lite"] .dx .dx-kpi::after,html[data-motion="lite"] .dx .mp-dx-panel::after{display:none}

@keyframes mpDxHeadIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mpDxTitleLine{0%{opacity:0;transform:scaleX(0)}35%{opacity:1}100%{opacity:.65;transform:scaleX(1)}}
@keyframes mpDxActionIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mpDxKpiIn{0%{opacity:0;transform:translateY(12px) scale(.982)}72%{opacity:1;transform:translateY(-1px) scale(1.006)}100%{opacity:1;transform:none}}
@keyframes mpDxKpiLine{0%{opacity:0;transform:scaleX(0)}55%{opacity:.86}100%{opacity:.45;transform:scaleX(1)}}
@keyframes mpDxHotValue{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 16px color-mix(in srgb,var(--ui-accent-hi,#f6c15c) 38%,transparent)}}
@keyframes mpDxPanelIn{from{opacity:0;transform:translateY(13px) scale(.993)}to{opacity:1;transform:none}}
@keyframes mpDxFeedIn{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes mpDxTableRowIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes mpDxBarSheen{to{transform:translateX(135%)}}
@keyframes mpDxOverdueDot{0%,100%{box-shadow:0 0 0 3px rgba(239,83,80,.18)}50%{box-shadow:0 0 0 6px rgba(239,83,80,.055)}}
@keyframes mpDxClearMark{0%{opacity:.2;transform:scale(.72) rotate(-10deg)}72%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes mpDxRankMedal{0%{opacity:.15;transform:scale(.76) rotate(-8deg)}72%{opacity:1;transform:scale(1.09) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes mpDxCountIn{0%{opacity:0;transform:scale(.62)}72%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}

@media(max-width:900px){
  html[data-motion="full"] .dx .dx-kpi:hover b{transform:none}
  html[data-motion="full"] .dx .dx-row:hover td:first-child{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .dx .dx-kpi::after,.dx .mp-dx-panel::after{display:none!important}
}

/* ======================================================================
   LOGIN-STYLE INNER ASSEMBLY v8.4.5
   Внутренние страницы собираются слоями по тому же принципу, что login:
   атмосфера -> заголовок -> управление -> поверхности -> содержимое.
   ====================================================================== */

#page.mp-assembled-page{isolation:isolate}
#page.mp-assembled-page::before{
  content:"";position:absolute;z-index:0;left:4%;right:4%;top:-42px;height:210px;pointer-events:none;
  background:
    radial-gradient(48% 74% at 28% 0%,rgba(246,193,92,.10),transparent 72%),
    radial-gradient(34% 66% at 72% 8%,rgba(201,116,28,.055),transparent 76%);
  opacity:0;transform:translateY(-10px) scale(.97);filter:blur(12px);
}
#page.mp-assembled-page>.mp-assembly-block{position:relative;z-index:1}
html[data-scheme="light"] #page.mp-assembled-page::before{
  background:
    radial-gradient(48% 74% at 28% 0%,rgba(139,91,25,.065),transparent 72%),
    radial-gradient(34% 66% at 72% 8%,rgba(201,116,28,.035),transparent 76%);
}

html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page::before{
  animation:mpPageAtmosphereIn .92s var(--mp-ease) both;
}

/* Главные блоки страницы приходят не плоским fade, а как элементы login-panel. */
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page>.mp-assembly-block{
  animation:mpLoginStyleBlockIn .58s var(--mp-ease) both!important;
  animation-delay:calc(70ms + var(--mp-assembly-i,0)*78ms)!important;
  transform-origin:50% 20%;
}
html[data-motion="lite"] #page.page-enter.mp-page-arrive.mp-assembled-page>.mp-assembly-block{
  animation-duration:.25s!important;
  animation-delay:calc(25ms + var(--mp-assembly-i,0)*20ms)!important;
  filter:none!important;
}

/* Hero / page head: сначала контейнер, затем текст и действия внутри. */
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page .mp-assembly-head>.mp-assembly-piece{
  animation:mpLoginStylePieceIn .48s var(--mp-ease) both;
  animation-delay:calc(145ms + var(--mp-piece-i,0)*72ms);
}
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page .mp-assembly-head .mp-assembly-copy{
  animation:mpLoginStyleCopyIn .45s var(--mp-ease) both;
  animation-delay:calc(205ms + var(--mp-copy-i,0)*58ms);
}
html[data-motion="lite"] #page.page-enter.mp-page-arrive.mp-assembled-page :is(.mp-assembly-head>.mp-assembly-piece,.mp-assembly-head .mp-assembly-copy){
  animation-duration:.2s!important;animation-delay:.06s!important;filter:none!important;
}

/* Управление внутри карточек появляется на следующей фазе. */
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page .mp-assembly-inner{
  animation:mpLoginStyleInnerIn .38s var(--mp-ease) both;
  animation-delay:calc(235ms + var(--mp-inner-i,0)*34ms);
}
html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page .mp-assembly-content{
  animation:mpLoginStyleContentIn .42s var(--mp-ease) both;
  animation-delay:calc(295ms + var(--mp-content-i,0)*36ms);
}
html[data-motion="lite"] #page.page-enter.mp-page-arrive.mp-assembled-page :is(.mp-assembly-inner,.mp-assembly-content){
  animation-duration:.18s!important;animation-delay:.08s!important;filter:none!important;
}

/* Выход страницы тоже напоминает успешный login: контент уступает место новому. */
html[data-motion="full"] #page.mp-page-leave>.mp-assembly-block:nth-child(odd){
  animation:mpLoginStyleLeaveA .14s cubic-bezier(.4,0,1,1) both!important;
}
html[data-motion="full"] #page.mp-page-leave>.mp-assembly-block:nth-child(even){
  animation:mpLoginStyleLeaveB .14s cubic-bezier(.4,0,1,1) both!important;
}

/* Первое появление shell после login — внутри тоже идёт каскад. */
html:not([data-motion="off"]) .motion-shell-enter .lc-sidebar-head{
  animation:mpShellBrandIn .58s var(--mp-ease) .08s both;
}
html:not([data-motion="off"]) .motion-shell-enter .mp-shell-nav-piece{
  animation:mpShellNavPieceIn .42s var(--mp-ease) both;
  animation-delay:calc(.19s + var(--mp-nav-i,0)*34ms);
}
html:not([data-motion="off"]) .motion-shell-enter .lc-top-inner{
  animation:mpShellTopInnerIn .48s var(--mp-ease) .18s both;
}
html[data-motion="lite"] .motion-shell-enter :is(.lc-sidebar-head,.mp-shell-nav-piece,.lc-top-inner){
  animation-duration:.2s!important;animation-delay:.04s!important;filter:none!important;
}

/* Modal продолжает тот же язык движения: panel -> header -> body/form. */
html[data-motion="full"] .modal-backdrop.open .modal{
  animation:mpLoginStyleModalIn .38s var(--mp-spring) both!important;
  position:relative;
}
html[data-motion="full"] .modal-backdrop.open .modal::before{
  content:"";position:absolute;z-index:30;left:7%;right:7%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(246,193,92,.78),rgba(255,238,203,.95),rgba(246,193,92,.78),transparent);
  transform:scaleX(.08);opacity:0;transform-origin:center;
  animation:mpModalTopLight .66s var(--mp-ease) .08s both;
}
html:not([data-motion="off"]) .modal.mp-modal-sequence>.mp-modal-piece{
  animation:mpLoginStyleModalPieceIn .34s var(--mp-ease) both!important;
  animation-delay:calc(85ms + var(--mp-i,0)*46ms)!important;
}
html:not([data-motion="off"]) .modal.mp-modal-sequence .mp-modal-form-piece{
  animation:mpLoginStyleModalPieceIn .32s var(--mp-ease) both!important;
  animation-delay:calc(125ms + var(--mp-i,0)*38ms)!important;
}
html[data-motion="lite"] .modal.mp-modal-sequence :is(.mp-modal-piece,.mp-modal-form-piece){
  animation-duration:.16s!important;animation-delay:.04s!important;filter:none!important;
}

/* Drawer / dropdown: тот же stagger, но быстрее, чтобы рабочие действия не тормозили. */
html:not([data-motion="off"]) .drawer-backdrop.open .drawer-body>*{
  animation:mpLoginStyleDrawerPieceIn .30s var(--mp-ease) both!important;
  animation-delay:calc(45ms + var(--mp-i,0)*34ms)!important;
}
html[data-motion="full"] :is(.workspace-menu.open,.period-menu:not(.hidden),.search-results:not(.hidden)){
  transform-origin:top center;
  animation:mpLoginStylePopoverIn .24s var(--mp-ease) both;
}

@keyframes mpPageAtmosphereIn{
  0%{opacity:0;transform:translateY(-12px) scale(.96);filter:blur(16px)}
  45%{opacity:.92}
  100%{opacity:1;transform:none;filter:blur(8px)}
}
@keyframes mpLoginStyleBlockIn{
  0%{opacity:0;transform:translateY(18px) scale(.988);filter:blur(6px)}
  72%{opacity:1;transform:translateY(-1px) scale(1.002);filter:blur(.2px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStylePieceIn{
  0%{opacity:0;transform:translateY(11px);filter:blur(5px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStyleCopyIn{
  0%{opacity:0;transform:translateY(8px);filter:blur(4px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStyleInnerIn{
  0%{opacity:0;transform:translateY(7px) scale(.994);filter:blur(3px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStyleContentIn{
  0%{opacity:0;transform:translateY(9px);filter:blur(2px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStyleLeaveA{
  to{opacity:0;transform:translateX(-9px) translateY(-3px) scale(.996);filter:blur(3px)}
}
@keyframes mpLoginStyleLeaveB{
  to{opacity:0;transform:translateX(9px) translateY(-3px) scale(.996);filter:blur(3px)}
}
@keyframes mpShellBrandIn{
  from{opacity:0;transform:translateX(-12px) scale(.985);filter:blur(5px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpShellNavPieceIn{
  from{opacity:0;transform:translateX(-10px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpShellTopInnerIn{
  from{opacity:0;transform:translateY(-9px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStyleModalIn{
  0%{opacity:0;transform:translateY(18px) scale(.962);filter:blur(7px)}
  70%{opacity:1;transform:translateY(-2px) scale(1.004);filter:blur(.2px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpModalTopLight{
  0%{opacity:0;transform:scaleX(.08)}
  40%{opacity:1}
  100%{opacity:0;transform:scaleX(1)}
}
@keyframes mpLoginStyleModalPieceIn{
  from{opacity:0;transform:translateY(9px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStyleDrawerPieceIn{
  from{opacity:0;transform:translateX(10px) translateY(4px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mpLoginStylePopoverIn{
  from{opacity:0;transform:translateY(-6px) scale(.982);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

@media(max-width:900px){
  #page.mp-assembled-page::before{left:0;right:0;top:-28px;height:160px}
  html:not([data-motion="off"]) #page.page-enter.mp-page-arrive.mp-assembled-page>.mp-assembly-block{
    animation-delay:calc(40ms + var(--mp-assembly-i,0)*52ms)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #page.mp-assembled-page::before{display:none!important}
}
