/* Motion uses opacity/transform; no perpetual effect or rendering loop. */
:root{--ease:cubic-bezier(.22,1,.36,1);--motion-line:#b4bfb3;--motion-shadow:#21351c0a}
body.dark{--motion-line:#3d493b;--motion-shadow:#00000024}
.shell{background-image:linear-gradient(90deg,transparent 99%,var(--motion-shadow) 99%);background-size:88px 100%}
.sidebar{border-right-color:var(--motion-line)}
.brand-mark{border-radius:3px;transform:rotate(-5deg)}
.brand-mark .icon{transform:rotate(5deg)}
.topbar{border-bottom-color:var(--motion-line)}
.page-title h1{font-size:clamp(36px,3.2vw,52px);letter-spacing:-.01em}
.page-title .eyebrow:before{content:'';display:inline-block;width:18px;height:2px;background:var(--accent);vertical-align:middle;margin-right:8px}
.nav{position:relative;transition:color 180ms,background-color 180ms,transform 220ms var(--ease)}
.nav.active{border-left-color:transparent;transform:translateX(2px)}
.nav:before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--accent);transform:scaleY(0);transition:transform 220ms var(--ease);border-radius:2px}
.nav.active:before{transform:scaleY(1)}
button,.button{transition:transform 160ms var(--ease),background-color 160ms,border-color 160ms}
button:active:not(:disabled),.button:active{transform:translateY(1px) scale(.98)}
.metric{border-top:0;border-radius:9px;box-shadow:0 5px 16px var(--motion-shadow);transition:border-color 180ms,transform 220ms var(--ease)}
.metric:before{content:'';position:absolute;left:20px;top:0;width:34px;height:3px;background:var(--metric-accent,var(--accent));border-radius:0 0 2px 2px}
.metric strong{font-size:clamp(32px,2.7vw,43px);letter-spacing:-.01em}
.metric-label{display:block;margin:2px 0 13px}
.metric-icon{position:absolute;right:19px;top:21px;opacity:.85}
.metric small{display:block;font-size:10px}
.account-table-wrap{box-shadow:0 6px 24px var(--motion-shadow)}
.account-table tbody tr{transition:background-color 160ms}
.item-card,.bot-card{transition:border-color 180ms,transform 220ms var(--ease)}
.item-picture img{transition:transform 260ms var(--ease)}
.auth-brand{position:relative;overflow:hidden}
.auth-brand:after{content:'';position:absolute;right:-65px;bottom:-55px;width:230px;height:230px;border:1px solid var(--motion-line);transform:rotate(-22deg);pointer-events:none}
dialog::backdrop{background:#05090799}
.toast{border-left:3px solid var(--accent);box-shadow:0 8px 28px var(--motion-shadow)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.metric:hover{transform:translateY(-3px);border-color:var(--motion-line)}.item-card:hover{transform:translateY(-3px)}.item-card:hover img{transform:scale(1.035)}}
@media(max-width:700px){.page-title h1{font-size:36px}.metric strong{font-size:33px}.metric small{font-size:9px}.metric-icon{right:14px;top:20px}.nav.active{transform:none}.nav:before{top:auto;bottom:0;left:12px;right:12px;width:auto;height:2px;transform:scaleX(0)}.nav.active:before{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.nav.active{transform:none}}
