.admin-app[data-skin=graphite]{--motion-ease:cubic-bezier(0.16,1,0.3,1)}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav,.nav-symbol,.button,.icon-button,.integration-tile,.product-list-row){transition:background-color .22s,color .22s,border-color .25s,box-shadow .3s,transform .4s var(--motion-ease)}.admin-app[data-skin=graphite] .animated-nav-icon *{transform-box:fill-box;transform-origin:center}.admin-app[data-skin=graphite] .animated-nav-icon .m-orbit{transform-box:view-box;transform-origin:12px 12px}.admin-app[data-skin=graphite] .ap-surface{position:relative;transition:border-color .28s,box-shadow .35s,background-color .25s,transform .4s var(--motion-ease)}.admin-app[data-skin=graphite] .ap-surface:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 68%);transition:opacity .35s}.admin-app[data-skin=graphite] .ap-enter{animation:ap-enter .65s var(--motion-ease) both;animation-delay:var(--enter-delay,0s)}.admin-app[data-skin=graphite] .chart-line{stroke-dasharray:1;animation:ap-draw 1.1s var(--motion-ease)}.admin-app[data-skin=graphite] .funnel-track i{animation:ap-bar .95s var(--motion-ease)}.admin-app[data-skin=graphite] .sales-funnel>div:nth-child(2) .funnel-track i{animation-duration:1.05s}.admin-app[data-skin=graphite] .sales-funnel>div:nth-child(3) .funnel-track i{animation-duration:1.15s}.admin-app[data-skin=graphite] .sales-funnel>div:nth-child(4) .funnel-track i{animation-duration:1.25s}.admin-app[data-skin=graphite] .modal{animation:ap-dialog .3s var(--motion-ease)}.admin-app[data-skin=graphite] :is(.button,.text-link,.icon-button) svg{transition:transform .35s var(--motion-ease)}.admin-app[data-skin=graphite] .brand-icon{transition:transform .45s var(--motion-ease),box-shadow .3s}@keyframes ap-enter{0%{opacity:0;top:14px}to{opacity:1;top:0}}@keyframes ap-dialog{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}@keyframes ap-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes ap-bar{0%{transform:scaleX(0)}to{transform:none}}@keyframes ap-pop{0%,to{transform:none}25%{transform:translateY(-3px) scale(1.15)}55%{transform:translateY(1px) scale(.95)}75%{transform:translateY(-1px) scale(1.04)}}@keyframes ap-coin{0%,to{transform:none}35%{transform:rotateY(50deg) rotate(-9deg) scale(1.1)}70%{transform:rotateY(-20deg) rotate(5deg)}}@keyframes ap-lid{0%,to{transform:none}35%,60%{transform:translateY(-2.6px) rotate(-6deg)}}@keyframes ap-cart{0%,to{transform:none}25%{transform:translateX(-2px) rotate(-8deg)}65%{transform:translateX(3px) rotate(6deg)}}@keyframes ap-head{0%,to{transform:none}35%{transform:translateY(-3px)}70%{transform:translateY(1px)}}@keyframes ap-lines{0%,to{transform:none;opacity:1}35%{transform:translateX(3px);opacity:.35}70%{transform:translateX(-1px);opacity:1}}@keyframes ap-orbit{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes ap-slider{0%,to{transform:none}40%{transform:translateX(4px)}75%{transform:translateX(-2px)}}@keyframes ap-active-tile{0%,24%,8%,to{transform:none}14%{transform:translateY(-2px) scale(1.08)}19%{transform:translateY(1px)}}@keyframes ap-active-coin{0%,12%,32%,to{transform:none}21%{transform:rotateY(40deg) scale(1.08)}27%{transform:rotateY(-15deg)}}@keyframes ap-active-cart{0%,10%,30%,to{transform:none}18%{transform:translateX(2px) rotate(-6deg)}24%{transform:translateX(-1px)}}@keyframes ap-brand{0%{transform:rotate(-12deg) scale(.75);opacity:0}65%{transform:rotate(3deg) scale(1.06);opacity:1}to{transform:none;opacity:1}}@media (prefers-reduced-motion:no-preference){.admin-app[data-skin=graphite] .brand-icon,.login-page[data-skin=graphite] .brand-icon{animation:ap-brand .85s cubic-bezier(.16,1,.3,1)}.admin-app[data-skin=graphite] :where([aria-current=page][data-motion=dashboard]) .m-tile{animation:ap-active-tile 5.5s ease-in-out infinite}.admin-app[data-skin=graphite] :where([aria-current=page][data-motion=dashboard]) .m-tile:nth-child(2){animation-delay:.1s}.admin-app[data-skin=graphite] :where([aria-current=page][data-motion=dashboard]) .m-tile:nth-child(3){animation-delay:.2s}.admin-app[data-skin=graphite] :where([aria-current=page][data-motion=dashboard]) .m-tile:nth-child(4){animation-delay:.3s}.admin-app[data-skin=graphite] :where([aria-current=page][data-motion=finance]) .m-coin{animation:ap-active-coin 6s ease-in-out infinite}.admin-app[data-skin=graphite] :where([aria-current=page][data-motion=cart]) .m-cart{animation:ap-active-cart 5.5s ease-in-out infinite}.admin-app[data-skin=graphite] .sales-funnel svg{animation:ap-active-tile 7s ease-in-out infinite}.admin-app[data-skin=graphite] .sales-funnel>div:nth-child(2) svg{animation-delay:.6s}.admin-app[data-skin=graphite] .sales-funnel>div:nth-child(3) svg{animation-delay:1.2s}.admin-app[data-skin=graphite] .sales-funnel>div:nth-child(4) svg{animation-delay:1.8s}.admin-app[data-skin=graphite] .metric-label>span{animation:ap-active-coin 8s ease-in-out infinite}.admin-app[data-skin=graphite] .metric[data-tone=orange] .metric-label>span{animation-delay:1.5s}.admin-app[data-skin=graphite].ap-motion-demo .m-tile{animation:ap-pop .8s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-tile:nth-child(2){animation-delay:90ms}.admin-app[data-skin=graphite].ap-motion-demo .m-tile:nth-child(3){animation-delay:.18s}.admin-app[data-skin=graphite].ap-motion-demo .m-tile:nth-child(4){animation-delay:.27s}.admin-app[data-skin=graphite].ap-motion-demo .m-coin{animation:ap-coin 1s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-lid{animation:ap-lid .95s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-cart{animation:ap-cart .85s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-head{animation:ap-head .85s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-lines{animation:ap-lines .9s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-orbit{animation:ap-orbit 1.5s var(--motion-ease) both}.admin-app[data-skin=graphite].ap-motion-demo .m-slider{animation:ap-slider .95s var(--motion-ease) both}.login-page[data-skin=graphite] .login-flow>div{animation:ap-pop .75s ease-out both}.login-page[data-skin=graphite] .login-flow>div:nth-child(2){animation-delay:.1s}.login-page[data-skin=graphite] .login-flow>div:nth-child(3){animation-delay:.2s}.login-page[data-skin=graphite] .login-flow>div:nth-child(4){animation-delay:.3s}}@media (hover:hover) and (pointer:fine){.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .nav-symbol{transform:translateY(-2px) scale(1.09);background:color-mix(in srgb,var(--motion-tone,var(--accent)) 20%,transparent);box-shadow:0 6px 18px color-mix(in srgb,var(--motion-tone,var(--accent)) 12%,transparent)}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):hover{background:var(--panel);color:var(--ink)}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-tile{animation:ap-pop .75s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-tile:nth-child(2){animation-delay:65ms}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-tile:nth-child(3){animation-delay:.13s}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-tile:nth-child(4){animation-delay:195ms}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-coin{animation:ap-coin .85s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-lid{animation:ap-lid .8s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-cart{animation:ap-cart .75s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-head{animation:ap-head .75s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-lines{animation:ap-lines .8s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-orbit{animation:ap-orbit 1.4s var(--motion-ease) both}.admin-app[data-skin=graphite] :is(.sidebar nav a,.settings-nav):is(:hover,:focus-visible) .m-slider{animation:ap-slider .85s var(--motion-ease) both}.admin-app[data-skin=graphite] .brand:hover .brand-icon{transform:rotate(-7deg) scale(1.08);box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 20%,transparent)}.admin-app[data-skin=graphite] .ap-surface:is(:hover,:focus-within):before{opacity:1}.admin-app[data-skin=graphite] .ap-surface:hover{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));box-shadow:0 10px 25px #00000020}.admin-app[data-skin=graphite] :is(.metric,.integration-tile).ap-surface:hover{transform:translateY(-4px)}.admin-app[data-skin=graphite] .metric:hover .metric-label>span{animation:ap-pop .75s var(--motion-ease)}.admin-app[data-skin=graphite] :is(.button,.text-link):hover svg{transform:translateX(4px)}.admin-app[data-skin=graphite] .button:hover:not(:disabled){background:var(--panel-2);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 7px 18px #0002}.admin-app[data-skin=graphite] .heading-actions .button:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}.admin-app[data-skin=graphite] :is(.button,.icon-button):active:not(:disabled){transform:scale(.95)}.admin-app[data-skin=graphite] .theme-toggle:hover svg{transform:rotate(35deg) scale(1.12)}.admin-app[data-skin=graphite] .search-button:hover svg{animation:ap-pop .65s var(--motion-ease)}.admin-app[data-skin=graphite] .sales-funnel>div:hover svg{transform:translateY(-2px) scale(1.12) rotate(-6deg);background:var(--accent-soft)}}.admin-app[data-skin=graphite].ap-motion-paused *,.admin-app[data-skin=graphite].ap-motion-paused :before{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){:is(.admin-app,.login-page)[data-skin=graphite] *,:is(.admin-app,.login-page)[data-skin=graphite] :after,:is(.admin-app,.login-page)[data-skin=graphite] :before{animation:none!important;transition:none!important;scroll-behavior:auto!important}.admin-app[data-skin=graphite] :is(.nav-symbol,.animated-nav-icon *,.ap-surface,.brand-icon,.sales-funnel svg,.button svg,.text-link svg,.icon-button svg,.metric-label>span,.button,.icon-button){transform:none!important}}