/* ============ 演示台外围 ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  background: #1b1b1b;
  color: #111;
  -webkit-font-smoothing: antialiased;
}

.stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; gap: 32px; }

/* 缩放包在外壳外：手机内部的 position:fixed 才能相对屏幕，而不是黑边 */
.phone-scale {
  flex: 0 0 auto;
  transform-origin: top center;
}

/* ============ 手机框 ============ */
.phone {
  position: relative;
  width: 375px;
  height: 812px;
  background: #000;
  border-radius: 44px;
  padding: 0;
  border: 12px solid #000;
  box-sizing: content-box;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.phone-screen {
  position: relative;
  width: 375px;
  height: 812px;
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  --rpx: calc(375px / 750);
  --xsrj-vh: 812px;
  --xsrj-vw: 375px;
  --safe-area-inset-top: 54px;
  --safe-area-inset-bottom: 34px;
}
.notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 150px; height: 28px; background: #000; border-radius: 0 0 16px 16px;
  z-index: 1000;
  pointer-events: none;
}
.phone-screen::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--safe-area-inset-bottom);
  background: #fff;
  z-index: 400;
  pointer-events: none;
}
.phone-screen::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 118px;
  height: 4px;
  background: #1a1a1a;
  border-radius: 4px;
  z-index: 410;
  pointer-events: none;
}
.xsrj-page-host { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; background: #fff; -webkit-overflow-scrolling: touch; }
.xsrj-tabbar-host { position: absolute; left: 0; right: 0; bottom: 0; z-index: 999; overflow: visible; }
.xsrj-boot {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  pointer-events: none;
}
.xsrj-boot.is-done { display: none; }
/* 首屏 CSS 未落地前不露裸文本，避免城市表/标签先闪一帧 */
.xsrj-page-host:not(.xsrj-ready),
.xsrj-tabbar-host:not(.xsrj-ready) { visibility: hidden; }
.xsrj-page-host [role="button"],
.xsrj-tabbar-host [role="button"] { cursor: pointer; }

/* ============ 运行时基础样式 ============ */
.xsrj-page { min-height: 100%; position: relative; }
.xsrj-comp { display: block; width: 100%; min-height: 0; }
.masonry-cell > .xsrj-comp {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible;
}
.xsrj-page-host img { max-width: 100%; }
.xsrj-map img { max-width: none !important; }
.xsrj-map .leaflet-tile {
  width: 256px !important;
  height: 256px !important;
}
.phone-screen input,
.phone-screen textarea {
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

/* swiper：横向滑动分页 */
.xsrj-swiper { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; height: 100%; }
.xsrj-swiper::-webkit-scrollbar { display: none; }
.xsrj-swiper-item { flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: center; }

/* 地图 */
.xsrj-map,
.xsrj-map.leaflet-container { width: 100%; height: 100%; min-height: 200px; background: #e8eee9; }
.xsrj-map .leaflet-pane,
.xsrj-map .leaflet-map-pane { position: absolute; }
.xsrj-map-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 12px; }
.xsrj-page-host .banner-image,
.xsrj-page-host .hero-img { max-width: none; width: 100%; height: 100%; object-fit: cover; }

/* picker：控件叠在 wxml 子节点上，不要撑破表单行 */
.xsrj-picker { display: block; width: 100%; min-width: 0; position: relative; }
.xsrj-picker-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.xsrj-select, .xsrj-date { border: none; background: transparent; font: inherit; color: inherit; }
.xsrj-region { color: #666; }

/* toast：挂在手机屏里，避免提示跑到桌面正中央 */
.xsrj-toast-root { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; pointer-events: none; }
.xsrj-toast { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.82); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; margin-top: 8px; white-space: nowrap; }
.xsrj-toast-icon { color: #4cd964; }

/* loading */
.xsrj-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: rgba(0,0,0,.75); color: #fff; padding: 18px 24px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; }
.xsrj-spinner { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: xsrj-spin .7s linear infinite; }
@keyframes xsrj-spin { to { transform: rotate(360deg); } }

/* modal */
.xsrj-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; display: flex; align-items: center; justify-content: center; }
.xsrj-modal { width: 280px; background: #fff; border-radius: 12px; overflow: hidden; text-align: center; }
.xsrj-modal-title { padding: 20px 20px 8px; font-size: 16px; font-weight: 600; }
.xsrj-modal-body { padding: 8px 20px 20px; font-size: 14px; color: #555; line-height: 1.6; }
.xsrj-modal-btns { display: flex; border-top: 1px solid #eee; }
.xsrj-modal-btns button { flex: 1; padding: 14px 0; border: none; background: #fff; font-size: 15px; cursor: pointer; }
.xsrj-btn-ok { color: #576b95; font-weight: 600; }
.xsrj-btn-cancel { color: #333; border-right: 1px solid #eee !important; }

/* ============ 演示台控制面板 ============ */
.panel { flex: 0 0 168px; color: #bbb; font-size: 12px; line-height: 1.4; }
.panel h1 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: #fff; letter-spacing: 0.02em; }
.panel .ids { display: flex; gap: 6px; }
.panel button {
  flex: 1;
  margin: 0;
  padding: 6px 0;
  border: 1px solid #3a3a3a;
  background: transparent;
  color: #ccc;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.panel button:hover { color: #fff; border-color: #666; }
.panel button.active { color: #fff; border-color: #fff; }
.panel .hint { margin: 10px 0 0; color: #666; font-size: 11px; line-height: 1.45; }

@media (max-width: 720px) {
  .stage { flex-direction: column; gap: 16px; }
  .panel { flex: none; width: 375px; }
}

/* ============ slider（小程序 <slider> → input[type=range]） ============
   小程序的 slider 是原生组件，浏览器里落成 range input 后默认样式是灰色细条 +
   系统滑块，和设计稿差很远，在深色轨道上甚至看不见滑块（验收反馈「滑轨缺按钮」）。
   这里按小程序的观感重画：细轨 + 实心圆滑块，尺寸对齐 block-size=24。 */
.xsrj-page input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;              /* 触控热区，轨道靠 background 画 */
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.xsrj-page input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #e6e0da;
}

.xsrj-page input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111111;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  /* 24px 滑块骑在 4px 轨道上，要往上提 (24-4)/2 才能居中 */
  margin-top: -10px;
}

.xsrj-page input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #e6e0da;
}

.xsrj-page input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111111;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}