/* H5 演示：手机宽度居中，桌面两侧留深色背景 */
:root {
  --xl-shell-max: 430px;
}

html {
  background: #0a1018;
}

body {
  width: min(var(--xl-shell-max), 100vw) !important;
  max-width: 100vw;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.35);
  min-height: 100%;
  height: 100%;
  position: relative;
}

#app,
uni-app,
uni-page,
uni-page-wrapper,
uni-page-body {
  max-width: 100%;
}

.uni-mask,
.uni-modal,
.uni-toast,
.uni-sample-toast,
.uni-actionsheet,
.uni-picker-container,
.uni-picker-toggle,
.uni-tabbar,
.uni-tabbar-bottom,
uni-tabbar,
.uni-page-head,
.uni-page-head-ft,
.uni-page-head-hd,
.uni-popup,
.uni-popup__wrapper,
[class*="uni-popup"],
[class*="uni-toast"],
.inputBar,
.modalMask {
  width: min(var(--xl-shell-max), 100vw) !important;
  max-width: 100vw;
  left: max(0px, calc((100vw - min(var(--xl-shell-max), 100vw)) / 2)) !important;
  right: auto !important;
}