:root{--motion-fast:140ms;--motion-normal:240ms;--motion-ease:cubic-bezier(.22,.68,0,1)}
/* Only paint properties change on theme selection; inputs keep their geometry. */
html,body,.site-header,.sidebar,main,.profile-panel,.appearance-panel,
.training-workout,.training-period,.plan-card,.structure-editor,.editor-workout,
.benchmark-card,.benchmark-record,.analysis-kpi,.analysis-filters,.analysis-table-wrap,
.auth-card,.training-table th,.training-table td,.superset-heading,.editor-superset{
  transition:background-color var(--motion-normal) ease,color var(--motion-normal) ease,border-color var(--motion-normal) ease;
}
button,.primary-button,.secondary-button,.nav-item,.plan-card-main,.palette-option,
input,select,textarea,.theme-options span,.analysis-tabs a{
  transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease;
}
.plan-card,.training-period,.structure-item{
  transition:background-color var(--motion-normal) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,translate var(--motion-normal) var(--motion-ease);
}
@media(hover:hover) and (pointer:fine){
  .plan-card:hover,.training-period:hover{translate:0 -2px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 9%,transparent)}
  .palette-option span{transition:scale var(--motion-fast) var(--motion-ease)}
  .palette-option:hover span{scale:1.12}
}
.primary-button,.secondary-button,.color-button,.account-button,.icon-button{
  transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,scale var(--motion-fast) var(--motion-ease);
}
:is(.primary-button,.secondary-button,.color-button,.account-button,.icon-button):active:not(:disabled){scale:.98}
.training-bar>span{transition:width 300ms var(--motion-ease)}
.fold{display:inline-block;transition:rotate var(--motion-normal) var(--motion-ease);rotate:-90deg}
[aria-expanded=true] .fold{rotate:0deg}
.appearance-panel{transform-origin:left bottom}
.training-popover{transform-origin:center top}
.confirmation-dialog[open]{animation:motion-dialog-in 220ms var(--motion-ease) both}
.confirmation-dialog[open]::backdrop{animation:motion-backdrop-in 220ms ease both}
.confirmation-dialog[data-motion-closing]::backdrop{animation:motion-backdrop-out 150ms ease both}
main{animation:motion-page-in 180ms ease both}
@keyframes motion-page-in{from{opacity:0}to{opacity:1}}
@keyframes motion-dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes motion-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes motion-backdrop-out{from{opacity:1}to{opacity:0}}
@media(max-width:760px){.appearance-panel{transform-origin:right top}}
/* Keep the profile drawer's coordinated slide and scrim above theme transitions. */
@media(min-width:761px){.profile-panel{transition:transform 280ms var(--motion-ease),background-color var(--motion-normal) ease,color var(--motion-normal) ease}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .plan-card:hover,.training-period:hover{translate:none}
  .palette-option:hover span{scale:1}
}