:root{--motion-ease:cubic-bezier(.2,.8,.2,1)}
.btn,.nav-item,.view-switch button,.logout,.menu-toggle,.xbtn,.box button{transition:transform 180ms var(--motion-ease),background-color 180ms,border-color 180ms,box-shadow 180ms}
button:active:not(:disabled){transform:scale(.965)}
.field,.select,.box input{transition:border-color 180ms,box-shadow 180ms;background-clip:padding-box}
.field:focus,.select:focus,.box input:focus{border-color:#69dcbf;box-shadow:0 0 0 3px #57dfbb16}
.kcard{transition:border-color 180ms,box-shadow 180ms,background-color 180ms}
.kcard.motion-dragging{opacity:.5;box-shadow:0 12px 28px #0005;border-color:#71e6c8}
.kcol{transition:background-color 180ms,outline-color 180ms}
.nav-item.active .icon{color:#a0ffe3}
.motion-ripple{position:fixed;width:36px;height:36px;border:1px solid #a5ffe699;background:#a5ffe627;border-radius:50%;pointer-events:none;z-index:250;transform:translate(-50%,-50%);animation:desk-ripple 420ms ease-out forwards}
.motion-feedback{position:fixed;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#a9ffe0;background:#143e37;border:1px solid #61dcaf;font-size:22px;box-shadow:0 8px 24px #0004;pointer-events:none;z-index:245;animation:desk-complete 700ms var(--motion-ease) forwards}
.toast{animation:desk-toast-in 280ms var(--motion-ease);overflow:hidden}
.toast::after{content:"";position:absolute;bottom:0;right:0;height:2px;width:100%;background:#8cf1cf;transform-origin:right;animation:desk-toast-time 3500ms linear forwards}
.form-error:not(:empty),.box .error{animation:desk-error 280ms ease-out}
#syncIndicator[data-sync="pending"]::before{content:"";display:inline-block;width:9px;height:9px;margin-left:7px;border:1.5px solid #69b39e;border-top-color:#e1fff4;border-radius:50%;vertical-align:middle;animation:desk-spin 700ms linear infinite}
#syncIndicator[data-sync="blocked"]{border-color:#dd7184!important;color:#ffd2db!important}
@keyframes desk-ripple{to{opacity:0;transform:translate(-50%,-50%) scale(2.1)}}
@keyframes desk-complete{0%{opacity:0;transform:translate(-50%,-35%) scale(.5)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.06)}70%{opacity:1;transform:translate(-50%,-75%) scale(1)}100%{opacity:0;transform:translate(-50%,-100%) scale(.95)}}
@keyframes desk-toast-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes desk-toast-time{to{transform:scaleX(0)}}
@keyframes desk-error{0%,100%{transform:translateX(0)}25%{transform:translateX(4px)}65%{transform:translateX(-3px)}}
@keyframes desk-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){.btn:hover,.box button:hover{box-shadow:0 5px 16px #0002}.kcard:hover{border-color:#61948e;box-shadow:0 7px 20px #0003}.nav-item:hover .icon{transform:translateX(-2px)}.nav-item .icon{transition:transform 180ms var(--motion-ease)}}
@media(max-width:690px){.sidebar.open{animation:desk-menu 230ms var(--motion-ease)}.toast{left:15px;bottom:18px;max-width:calc(100vw - 30px)}}
@keyframes desk-menu{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ripple,.motion-feedback{display:none}}