/* ---------- 手机外壳 ---------- */
.phone{
  position:relative;
  width:390px;height:844px;
  background:#fff;
  border-radius:46px;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.45), 0 0 0 11px #101012, 0 0 0 12px #2c2c30;
  overflow:hidden;
  flex:0 0 auto;
}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;}

/* 顶部安全区占位（原来是仿 iOS 的状态栏：时间/信号/电量，已按需求去掉，只留高度）
   这个高度＝全站顶部内缩量，必须与下列浮层的 padding-top 保持一致：
   #editor（css/23）/ #order,#checkout,#addrList,#addrEdit,#drafts,#favs,#catalog（css/13）/ #chain（css/42）
   12px 是下限附近的安全值：再小会让手机壳 46px 圆角切到贴顶首行内容的左上/右上角 */
.statusbar{flex:0 0 auto;height:12px;}

.viewport{flex:1 1 auto;position:relative;min-height:0;overflow:hidden;}

.page{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  padding:0 18px 100px;
  background:var(--bg);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease;
  -webkit-overflow-scrolling:touch;
}
.page.active{opacity:1;visibility:visible;}
.page::-webkit-scrollbar{width:0;}