/* ============================================================
   App Shell — 启动闪屏 / 下拉刷新 / 断网重试
   仅作用于 App 壳与 PWA，不影响网页原有布局
   ============================================================ */

/* ---------- 启动闪屏 ---------- */
.zsplash{
  position:fixed; left:0; top:0; right:0; bottom:0; z-index:2147483700;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:#ffffff;
  opacity:1; transition:opacity .36s ease;
  -webkit-transition:opacity .36s ease;
  -webkit-tap-highlight-color:transparent;
}
.zsplash.zsplash-out{ opacity:0; pointer-events:none; }
.zsplash-body{ display:flex; flex-direction:column; align-items:center; }
.zsplash-logo{
  width:76px; height:76px; border-radius:22px; display:block;
  box-shadow:0 10px 30px -10px rgba(15,23,42,.35);
  animation:zsplash-pop .55s cubic-bezier(.22,1.1,.36,1) both;
}
.zsplash-name{
  margin-top:16px; font-size:16px; font-weight:600; letter-spacing:.32em;
  color:#1c1c1e; text-indent:.32em;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  animation:zsplash-fade .5s ease .1s both;
}
.zsplash-bar{
  margin-top:18px; width:96px; height:3px; border-radius:2px;
  background:rgba(15,23,42,.08); overflow:hidden;
  animation:zsplash-fade .5s ease .18s both;
}
.zsplash-bar i{
  display:block; width:38%; height:100%; border-radius:2px;
  background:#111827;
  animation:zsplash-slide 1.05s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes zsplash-pop{ from{ transform:scale(.86); opacity:0 } to{ transform:scale(1); opacity:1 } }
@keyframes zsplash-fade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@keyframes zsplash-slide{ 0%{ transform:translateX(-120%) } 100%{ transform:translateX(300%) } }

/* ---------- 下拉刷新 ---------- */
.zpull{
  position:fixed; z-index:2147482500;
  left:50%; top:calc(env(safe-area-inset-top, 0px) + 8px);
  width:34px; height:34px; margin-left:-17px; border-radius:50%;
  background:#fff; box-shadow:0 6px 18px -6px rgba(15,23,42,.28);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s ease;
  pointer-events:none; -webkit-tap-highlight-color:transparent;
}
.zpull.on{ opacity:1; }
.zpull svg{ width:16px; height:16px; display:block; transition:transform .18s ease; transform:rotate(0deg); }
.zpull.ready svg{ transform:rotate(180deg); }
.zpull.loading svg{ animation:zpull-spin .8s linear infinite; }
@keyframes zpull-spin{ to{ transform:rotate(360deg) } }

/* ---------- 断网重试 ---------- */
.zoffline{
  position:fixed; left:0; top:0; right:0; bottom:0; z-index:2147483400;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,247,251,.97);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  animation:zoffline-in .2s ease both;
}
@keyframes zoffline-in{ from{ opacity:0 } to{ opacity:1 } }
.zoffline-box{
  width:82%; max-width:300px; padding:30px 24px 24px; text-align:center;
  background:#fff; border-radius:20px;
  box-shadow:0 22px 60px -30px rgba(15,23,42,.45);
}
.zoffline-icon{
  width:54px; height:54px; margin:0 auto 14px; border-radius:17px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(240,68,56,.1); color:#f04438; font-size:24px;
}
.zoffline-icon svg{ width:26px; height:26px; }
.zoffline h3{ margin:0 0 6px; font-size:16px; font-weight:600; color:#111827; }
.zoffline p{ margin:0 0 18px; font-size:13px; line-height:1.65; color:#8a94a6; }
.zoffline button{
  width:100%; height:44px; border:0; border-radius:12px; cursor:pointer;
  background:#111827; color:#fff; font-size:14px; font-weight:600;
  font-family:inherit; -webkit-appearance:none;
}
.zoffline button:disabled{ opacity:.6 }
.zoffline .zhint{ margin:12px 0 0; font-size:12px; color:#b0b7c3; }