/* =========================================================
   发力工坊 · 无刷新导航（iOS 风格过渡 + 顶部进度条）
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

#spaRoot {
  /* 固定视口高度：页面内部的 height:100% 弹性布局（如消息页）才能正常撑满，
     底部 Tab 栏才能固定在正确位置 */
  height: 100vh;
  height: 100dvh;
  transition: transform .17s cubic-bezier(.32,.72,0,1), opacity .17s ease;
  /* 注意：这里绝不能加 will-change:transform，否则页面内 position:fixed
     的元素（如我的页 Tab 栏）会失去视口锚定 */
  -webkit-font-smoothing: antialiased;
}

/* 滑出：前进向左、返回向右 */
#spaRoot.spa-out-left {
  transform: translateX(-24px);
  opacity: 0;
}
#spaRoot.spa-out-right {
  transform: translateX(24px);
  opacity: 0;
}

/* 滑入起始位：从右进入（前进）、从左进入（返回） */
#spaRoot.spa-in-right {
  transition: none;
  transform: translateX(24px);
  opacity: 0;
}
#spaRoot.spa-in-left {
  transition: none;
  transform: translateX(-24px);
  opacity: 0;
}

/* 顶部加载进度条（iOS 风格细蓝条） */
#spaProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: #007AFF;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(0,122,255,.5);
  z-index: 99998;
  transition: width .25s ease, opacity .3s ease;
  pointer-events: none;
}
#spaProgress.done {
  opacity: 0;
}