/* 聚合易支付 · 全局动效与切换优化 */

html{scroll-behavior:smooth}

/* 只允许竖滑，禁止整页横向滑动。
   注意：不能用 overflow-x:hidden —— CSS 规范规定 overflow-x/y 只要有一个不是 visible，
   另一个 visible 会被计算成 auto，body 因此变成滚动容器，position:sticky 的顶栏会失效
   （表现就是"一往下滑顶栏就不见了"）。改用 clip：裁剪溢出但不创建滚动容器，sticky 正常。 */
html,body{overflow-x:clip;max-width:100%}
/* 老浏览器不支持 clip 时的兜底：靠子元素自身约束防溢出 */
@supports not (overflow-x:clip){
  html,body{max-width:100vw}
  .tw,.side{max-width:100vw}
}
body{overscroll-behavior-x:contain}
img,svg,video,table,pre,code{max-width:100%}
input,textarea,select{max-width:100%}
/* flex 子项默认 min-width:auto 会把容器撑破，统一归零避免溢出 */
.min0,.row>*,.cap>*,.two>*{min-width:0}

/* 顶部进度条：已按需求移除（顶部不再显示滑动条） */
#zfpb{display:none!important}

/* 内容淡入：替代硬切 */
@keyframes zfin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.zf-in{animation:zfin .18s ease-out both}

/* 遮罩 / 公告弹窗：淡入淡出，不再 display 硬切 */
.mask{display:block!important;opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility 0s linear .18s}
.mask.on{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s}
.nmask{display:flex!important;opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility 0s linear .18s}
.nmask.on{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s}

/* 侧栏滑出交给 GPU，避免掉帧 */
.side{will-change:transform;-webkit-overflow-scrolling:touch}

/* SPA 切换时的内容过渡 */
.main{transition:opacity .14s ease}
.main.zf-sw{opacity:0}

/* 轻提示，替代系统 alert */
#zfts{position:fixed;left:50%;bottom:70px;z-index:10000;max-width:78vw;
  background:rgba(24,31,44,.94);color:#fff;font-size:13.5px;line-height:1.5;
  padding:10px 18px;border-radius:4px;text-align:center;pointer-events:none;
  opacity:0;transform:translateX(-50%) translateY(10px);
  transition:opacity .18s ease,transform .18s ease}
#zfts.on{opacity:1;transform:translateX(-50%) translateY(0)}
#zfts.cp{pointer-events:auto;cursor:pointer;word-break:break-all}

/* 点击反馈 */
a,button,.btn{-webkit-tap-highlight-color:rgba(37,99,235,.08)}
.btn:active,.side a.m:active{opacity:.85}

/* 表格横向滚动更顺 */
.tw{-webkit-overflow-scrolling:touch}

/* ============ 交互反馈：克制、快速、不花哨 ============
   原则：位移 ≤2px，时长 ≤.2s，只在 hover/active 时生效，不做常驻动画 */

/* 卡片 hover：极淡阴影 + 1px 上浮，桌面端才有感觉，手机端几乎无感 */
.card{transition:box-shadow .18s ease,border-color .18s ease}
.card:hover{box-shadow:0 2px 10px rgba(15,23,42,.06)}

/* 统计卡 */
.stats .st,.stat{transition:transform .16s ease,box-shadow .16s ease}
.stats .st:hover,.stat:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(15,23,42,.08)}

/* 表格行：划过时给一点底色，便于横向比对长行 */
.tw table tr{transition:background .14s ease}
.tw table tr:hover td{background:#fafbfd}

/* 按钮按压：轻微缩放 + 已有 opacity，手指按下有明确回应 */
.btn{transition:background .16s ease,transform .1s ease,box-shadow .16s ease}
.btn:active{transform:scale(.985)}
.btn:not(:disabled):hover{box-shadow:0 2px 8px rgba(37,99,235,.18)}

/* 输入框聚焦：边框与光晕渐变出现，不突然跳变 */
input,textarea,select{transition:border-color .16s ease,box-shadow .16s ease}

/* 侧栏菜单项 */
.side a.m{transition:background .16s ease,color .16s ease}

/* 图标按钮点击时轻微旋转，提示"已响应" */
.ham:active svg,.ubtn:active{opacity:.8}

/* 顶栏：滚动后加一点阴影，和内容区分开（由 JS 加 .scr） */
.top{transition:box-shadow .2s ease}
.top.scr{box-shadow:0 2px 10px rgba(15,23,42,.22)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .zf-in{animation:none}
  .mask,.nmask,#zfts,#zfpb,.main{transition:none}
  .card,.stats .st,.stat,.btn,.tw table tr,input,textarea,select,.top{transition:none}
  .card:hover,.stats .st:hover,.stat:hover{transform:none}
}