/* ============================================================
   motion.css — 全局动效统一层（规范见 MOTION.md）
   永远最后加载。只覆盖 transition / animation 参数，不改布局、配色、
   只读的 app.css 原文件。令牌定义在 index.html :root：
     --ease   cubic-bezier(.2,.7,.3,1)   全站唯一品牌曲线
     --dur-1  .12s  微反馈（hover / 选中 / 按压）
     --dur-2  .2s   结构（侧栏收合 / 滑动指示条 / 抽屉）
     --dur-3  .3s   视图（页面与 tab 内容入场 / 全屏层）
   ============================================================ */

/* ---------- 1. 同类组件统一 · 分段控件 / 胶囊 tab ----------
   此前散落 .12/.13/.15/.2s 与无过渡（kx-dt-tab），统一为微反馈档 */
.prod-tab,.per,.fopt,.fchip,.set-seg button,.tob-seg button,.auth-seg button,
.stkd-tab,.ind-pop-seg button,.wl-ind-pop-seg button,.indlib-seg button,
.indlib-tabs button,.kx-dt-tab,.fcw-steptab,.auth-tabs button{
  transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}

/* ---------- 1b. 轨道式分段控件 · 统一滑块(seg-slide.js 注入 .seg-thumb) ----------
   滑块平移与 stkd-tab-ind 同档(--dur-2);.on 自身底色由 .seg-slid 压掉,改由滑块呈现 */
.seg-slid{position:relative;}
.seg-slid>.seg-thumb{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;
  transition:transform var(--dur-2) var(--ease),width var(--dur-2) var(--ease),height var(--dur-2) var(--ease);}
.seg-slid>*:not(.seg-thumb){position:relative;z-index:1;}
.seg-slid>.on{background:transparent !important;box-shadow:none !important;}
/* 收起态导航的左缘蓝条:原本是 .on::before(随选中项瞬跳),搬到滑块上随之一起滑动 */
.tob.collapsed .seg-slid .tob-navitem.on::before{display:none;}
.tob.collapsed .tob-nav>.seg-thumb::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue);}   /* -12px = 容器内边距,补回侧栏左缘 */
/* 左侧栏导航同制(垂直滑块):收合过程中滑块随宽度动画同步,结束后 transitionend 再对齐一次 */

/* ---------- 2. 同类组件统一 · 菜单行 / 列表行 / 图标按钮 ----------
   只收敛时长与曲线，保留各自原有的过渡属性列表 */
.gs-item,.add-item,.tob-mm-item,.tob-um-item,.tob-acctmenu-all,.tob-acctmenu-pick,
.tob-acctmenu-gear,.tob-acctmenu-add,.set-nav-item,.lib-row,.lib-item,.rcard,
.tob-navitem,.tob-acct,.tob-fund,.tob-collapse,.tob-assist-trigger,.ntab,.nav-icon{
  transition-duration:var(--dur-1);transition-timing-function:var(--ease);
}

/* ---------- 3. 左侧栏收合：宽度 + 内容连续过渡 ---------- */
.tob-side{transition:width var(--dur-2) var(--ease);}
.tob .trade-layer{transition:left var(--dur-2) var(--ease);}
.tob-collapse svg{transition:transform var(--dur-2) var(--ease);}

/* 文字标签由 display:none 瞬断改为「淡出 + 收窄」，端点位置与原居中版完全一致：
   收合时图标不再瞬移，文字随宽度动画连续消失（展开反向同理） */
.tob-navitem-label{display:inline-block;max-width:150px;overflow:hidden;
  transition:max-width var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.tob.collapsed .tob-navitem{justify-content:flex-start;padding:0 11px;}   /* 12+11+22/2 = 34 = 68/2,与居中端点重合 */
.tob.collapsed .tob-navitem-label{display:inline-block;max-width:0;opacity:0;}
.tob-navitem .tob-navitem-badge{transition:opacity var(--dur-1) var(--ease);}
.tob.collapsed .tob-navitem-badge{display:inline-flex;opacity:0;}

.tob-logo{display:inline-block;max-width:140px;overflow:hidden;
  transition:max-width var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.tob.collapsed .tob-logo{display:inline-block;max-width:0;opacity:0;}
.tob-brand{transition:padding var(--dur-2) var(--ease);}
/* 收起态配平:padL10 + logo0 + gap10 = 20,padR20 → 按钮恰好 20..48 居中(与图标列同轴),
   且内容总宽正好塞满 68px → auto margin 归零不溢出;动画中按钮仍贴右缘连续滑行 */
.tob.collapsed .tob-brand{justify-content:flex-start;padding:0 20px 0 10px;}
.tob.collapsed .tob-collapse{margin:0 0 0 auto;}

.tob-agententry span{display:inline-block;max-width:150px;overflow:hidden;
  transition:max-width var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.tob.collapsed .tob-agententry{justify-content:flex-start;padding:0 11px;}
.tob.collapsed .tob-agententry span{max-width:0;opacity:0;}

.tob-nav-label{max-height:26px;overflow:hidden;
  transition:max-height var(--dur-2) var(--ease),padding var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.tob.collapsed .tob-nav-label{height:auto;max-height:0;opacity:0;padding:0 10px;}

.tob-acct-meta{max-width:150px;overflow:hidden;
  transition:max-width var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.tob.collapsed .tob-acct{justify-content:flex-start;padding:8px 7px;}     /* 12+7=19=(68-30)/2,头像端点与居中版一致 */
.tob.collapsed .tob-acct-meta{display:flex;max-width:0;opacity:0;}

/* ---------- 4. 滑动选中指示条（stkd 三视图 tab 等） ---------- */
.stkd-tab-ind{transition:transform var(--dur-2) var(--ease),width var(--dur-2) var(--ease);}
.stkd-tab{transition:color var(--dur-2) var(--ease);}   /* 文字变色与指示条滑动同步 */

/* ---------- 5. 视图 / 页面级入场（只动 transform，不动 opacity） ---------- */
.tob-fade{animation-duration:var(--dur-3);animation-timing-function:var(--ease);}
.trade-layer{animation-duration:var(--dur-3);animation-timing-function:var(--ease);}
.newpill,.auth{animation-duration:var(--dur-3);animation-timing-function:var(--ease);}

/* ---------- 6. 无障碍：系统级减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}