/* ============================================================================
 * base.css —— 运行时的基础样式（不属于任何小程序页面）
 *
 * 尺寸体系：小程序 750rpx 设计稿 → 1rem = 100rpx
 *   html 字号 = min(100vw, 480px) / 7.5
 *   手机上是等比满宽；桌面端锁在 480px 宽（比例不变，跟手机上看到的一模一样）
 * ==========================================================================*/

html {
  font-size: calc(min(100vw, 480px) / 7.5);   /* 1rem = 100rpx */
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #EEEDEA;
  overflow: hidden;          /* 页面内各自滚动，body 不滚 */
}

* { box-sizing: border-box; }

#app {
  position: relative;
  width: min(100vw, 480px);
  height: 100%;
  margin: 0 auto;
  background: #FFFFFF;
  overflow: hidden;
}

/* 页面容器：固定铺满可视区，桌面端居中 */
.mp-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(100vw, 480px);
  margin: 0 auto;
  background: #FFFFFF;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

#page-home { overflow-y: auto; }              /* 主页是整页滚动，其余页内部滚动 */

.mp-page::-webkit-scrollbar,
.scroll-view::-webkit-scrollbar { width: 0; height: 0; }

/* 图片填充模式：对应小程序 <image mode> */
img { border: 0; }
img[data-mode="aspectFill"] { object-fit: cover; }
img[data-mode="aspectFit"]  { object-fit: contain; }
img[data-mode="widthFix"]   { height: auto; }

/* scroll-view */
.scroll-view {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.scroll-x { overflow-x: auto; overflow-y: hidden; }

/* input */
input {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

video { display: block; }

/* ============================== 轻提示 toast ============================== */
#mp-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 12rem;
  padding: .18rem .4rem;
  border-radius: .1rem;
  background: rgba(0, 0, 0, .75);
  color: #FFFFFF;
  font-size: .28rem;
  line-height: 1.45;
  text-align: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
  pointer-events: none;
}
#mp-toast.show { opacity: 1; visibility: visible; }

/* ============================== 模态框 showModal ============================== */
#mp-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
#mp-modal.show { display: block; }
#mp-modal .mp-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }

.mp-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(13.6rem, 88vw);
  background: #FFFFFF;
  border-radius: .12rem;
  overflow: hidden;
}
.mp-modal-title {
  padding: .44rem .44rem 0;
  text-align: center;
  font-size: .32rem;
  font-weight: 600;
  color: #1A1A1A;
}
.mp-modal-body {
  padding: .26rem .44rem .46rem;
  text-align: center;
  font-size: .27rem;
  line-height: 1.6;
  color: #707070;
  white-space: pre-line;
  max-height: 46vh;
  overflow-y: auto;
  word-break: break-all;
}
.mp-modal-ft { display: flex; border-top: 1px solid #EBEBEB; }
.mp-modal-btn {
  flex: 1;
  height: .92rem;
  line-height: .92rem;
  text-align: center;
  font-size: .3rem;
  color: #333333;
  cursor: pointer;
}
.mp-modal-btn:active { background: #F5F5F3; }
.mp-modal-btn.primary { color: #D0021B; font-weight: 600; border-left: 1px solid #EBEBEB; }

/* ============================== 图片预览 previewImage ============================== */
#mp-preview { position: fixed; inset: 0; z-index: 1100; background: #000; display: none; }
#mp-preview.show { display: block; }
.mp-pv-bd {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 手势全部交给 lib/mp.js 处理，浏览器不抢滚动/缩放 */
  touch-action: none;
}
.mp-pv-img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  /* transition 由 JS 按需设置：拖拽/捏合时必须为 none，否则每帧追 140ms，手感发黏 */
  transition: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  /* 提升为独立合成层，缩放平移走 GPU，不触发重排 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
.mp-pv-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .38rem;
  text-align: center;
  color: #FFFFFF;
  font-size: .24rem;
  letter-spacing: .02rem;
  opacity: .85;
}
.mp-pv-close {
  position: absolute;
  right: .24rem;
  top: .24rem;
  width: .64rem;
  height: .64rem;
  line-height: .64rem;
  text-align: center;
  color: #FFFFFF;
  font-size: .4rem;
  opacity: .85;
  cursor: pointer;
}
.mp-pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  font-size: .72rem;
  line-height: 1;
  padding: .2rem .24rem;
  opacity: .6;
  cursor: pointer;
  user-select: none;
}
.mp-pv-nav:active { opacity: 1; }
.mp-pv-nav.prev { left: .1rem; }
.mp-pv-nav.next { right: .1rem; }

/* ============================== 视频播放层（player.js） ==============================
 * 尺寸跟 #app 一致：手机满宽，桌面端锁 480px 居中，不脱离手机壳
 * ============================================================ */
#mp-player {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(100vw, 480px);
  margin: 0 auto;
  z-index: 1150;
  background: #000000;
  display: none;
}
#mp-player.show { display: block; }

body.mpl-lock { overflow: hidden; }

.mpl-mask { position: absolute; inset: 0; }

.mpl-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpl-video {
  width: 100%;
  max-height: 100%;
  background: #000000;
  display: block;
}

.mpl-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1rem;
  display: flex;
  align-items: center;
  padding: 0 .24rem;
  /* 顶部压一层渐变，白字压在亮画面上也看得清 */
  background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.mpl-title {
  flex: 1;
  min-width: 0;
  color: #FFFFFF;
  font-size: .26rem;
  line-height: 1.3;
  padding-right: .16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpl-close {
  flex: none;
  width: .64rem;
  height: .64rem;
  line-height: .64rem;
  text-align: center;
  color: #FFFFFF;
  font-size: .34rem;
  opacity: .9;
  cursor: pointer;
  pointer-events: auto;
}
.mpl-close:active { opacity: 1; }