/* web.css —— 网页版专属的补充样式（不被 _dev/rpx2css.cjs 覆盖，手工维护）
 *
 * 与小程序的三处区别，全部收在这里：
 *   ① 小程序有客户端绘制的原生导航条，网页版要自己画（.nb）
 *   ② 小程序 tabBar 是 fixed 的页面节点，网页版同样固定（.tb-host）
 *   ③ 电脑屏幕上把内容限制在 420px 居中，宽度口径由 runtime 写进 --rp
 */

html, body {
  margin: 0;
  padding: 0;
  background: #f5f2ec;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #2b2621;
}

/* 整屏容器：手机＝满宽，电脑＝420px 居中，并把 --rp 换成该宽度下的 1rpx */
.screen {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg, #f5f2ec);
  position: relative;
  overflow-x: hidden;
}

/* ---------- 原生导航条（自绘） ---------- */
.nb {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(88 * var(--rp, 0.5px));
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: #f7f5f0;
  color: #2b2621;
  box-shadow: 0 1px 0 rgba(43, 38, 33, .04);
}
.nb.on-tab .nb-back { visibility: hidden; }
.nb .nb-title {
  font-size: calc(32 * var(--rp, 0.5px));
  font-weight: 600;
  letter-spacing: calc(1 * var(--rp, 0.5px));
}
.nb .nb-back {
  position: absolute;
  left: calc(20 * var(--rp, 0.5px));
  bottom: calc(14 * var(--rp, 0.5px));
  font-size: calc(44 * var(--rp, 0.5px));
  line-height: 1;
  color: #6d6459;
  cursor: pointer;
  user-select: none;
}

/* ---------- 底部导航（结构沿用小程序 custom-tab-bar） ---------- */
.tb-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 -1px 0 rgba(43, 38, 33, .06);
}
.tb-host .tb { display: flex; }
.tb-host .tb-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

/* ---------- 网页版里的小控件 ---------- */
/* textarea/input 继承素纸风；小程序里输入框没有默认边框与背景 */
textarea, input {
  font-family: inherit;
  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}
textarea::placeholder, input::placeholder { color: #a2988b; }

/* 滚动条在桌面上淡一点，别抢卦纸的视觉 */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(162, 152, 139, .35); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

/* 小程序 scroll-view：网页版用 overflow 容器顶替（模板里加 class="scroll-y"） */
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }