:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:150ms;--motion-panel:220ms}
.environment-switch summary svg,.market-stats-toggle svg,.select-chevron{transition:transform var(--motion-panel) var(--motion-ease)}
.select-popover{transform-origin:top center}
.order-protection .protection-fields{overflow:hidden}
.order-protection summary{list-style:none;display:flex;align-items:center;gap:6px}
.order-protection summary::-webkit-details-marker{display:none}
.order-protection summary::before{content:"";display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--motion-panel) var(--motion-ease)}
.order-protection[open] summary::before{transform:rotate(45deg)}
/* A single moving selection surface keeps the direction control visually connected. */
.ticket .side-toggle{position:relative;isolation:isolate}
.ticket .side-toggle::before{content:"";position:absolute;inset:3px auto 3px 3px;width:calc(50% - 3px);background:#24634e;border-radius:2px;transition:transform var(--motion-panel) var(--motion-ease),background-color var(--motion-panel);pointer-events:none;z-index:0}
.ticket .side-toggle:has(#short.active)::before{transform:translateX(100%);background:#a44149}
.ticket .side-toggle button{position:relative;z-index:1;transition:color var(--motion-fast),background-color var(--motion-fast)}
.ticket .side-toggle #long.active,.ticket .side-toggle #short.active{background:transparent}
.ticket .side-toggle button.active:hover{background:transparent}
/* Native dialogs retain their focus trap and Escape semantics throughout transitions. */
dialog{opacity:0;translate:0 8px;transition:opacity 160ms ease,translate var(--motion-panel) var(--motion-ease),display var(--motion-panel) allow-discrete,overlay var(--motion-panel) allow-discrete}
dialog[open]{opacity:1;translate:0 0}
dialog:not([open]){pointer-events:none}
dialog::backdrop{opacity:0;transition:opacity 160ms ease,display var(--motion-panel) allow-discrete,overlay var(--motion-panel) allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;translate:0 8px}dialog[open]::backdrop{opacity:0}}
.view:not([hidden]){animation:citrus-page-in 180ms var(--motion-ease)}
.watch-button .ui-icon,#selected-watch .ui-icon{transition:fill var(--motion-fast),color var(--motion-fast)}
.header .nav{position:relative}
.header .nav::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-panel) var(--motion-ease)}
.header .nav.active{border-bottom-color:transparent}
.header .nav.active::after{transform:scaleX(1)}
@keyframes citrus-page-in{from{opacity:.65}to{opacity:1}}
@keyframes citrus-pane-in{from{opacity:.65;translate:0 3px}to{opacity:1;translate:0 0}}
@media(max-width:760px){
 .mobile-terminal-tabs{isolation:isolate;--active-tab:0}
 .mobile-terminal-tabs:has([data-mobile-pane=trade][aria-selected=true]){--active-tab:1}
 .mobile-terminal-tabs:has([data-mobile-pane=positions][aria-selected=true]){--active-tab:2}
 .mobile-terminal-tabs::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 16px)/3);background:var(--accent);border-radius:5px;transform:translateX(calc(var(--active-tab) * (100% + 4px)));transition:transform 260ms var(--motion-ease);pointer-events:none;z-index:0}
 .mobile-terminal-tabs button{position:relative;z-index:1;transition:color var(--motion-fast)}
 .mobile-terminal-tabs button[aria-selected=true]{background:transparent}
 body[data-mobile-pane=trade] .ticket,body[data-mobile-pane=positions] .positions-panel{animation:citrus-pane-in 180ms var(--motion-ease)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}