/**
 * 庐山讲解原型 · 小程序主色：微信绿 / 服务绿
 * 金额类仍用 --ns-price 区分于主色，便于阅读
 */
:root {
  /* HTML 原型视口：与微信开发者工具 iPhone 12 Pro 一致 */
  --mp-width: 390px;
  --mp-height: 844px;
  --ns-primary: #07c160;
  --ns-primary-dark: #06a150;
  --ns-primary-soft: #e8f8ef;
  --ns-primary-muted: rgba(7, 193, 96, 0.14);
  --ns-price: #fa615b;
  --ns-page-bg: #f5f6f7;
  --ns-card: #ffffff;
  --ns-text: #303133;
  --ns-text-secondary: #909399;
  --ns-border: #ebedf0;
  --ns-success: #07c160;
  --ns-success-soft: #e8f8ef;
  --ns-warning-bg: #fff7e6;
  --ns-warning-text: #fa8c16;
}

/* ========== 小程序 HTML 原型：手机外框（与 c01 首页统一） ========== */
body.mp-proto {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}

/* 窄视口（如 preview 390 宽 iframe）去掉左右留白，避免机壳被挤出横向滚动 */
@media (max-width: 420px) {
  body.mp-proto {
    padding: 12px 0;
  }
}

.phone-frame {
  width: var(--mp-width);
  height: var(--mp-height);
  background: #fff;
  border-radius: 36px;
  box-shadow: 0 0 0 8px #333, 0 0 0 10px #666, 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 24px;
  background: #333;
  border-radius: 0 0 16px 16px;
  z-index: 10;
  pointer-events: none;
}

.phone-screen {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 36px;
  background: var(--ns-page-bg);
  position: relative;
  box-sizing: border-box;
}

.phone-screen::-webkit-scrollbar {
  display: none;
}

/* 屏内底部条：相对手机屏底部固定 */
.phone-screen .bottom-bar,
.phone-screen .footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 25;
}

.phone-screen .tabbar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 26;
}

/* 与底部 Tab 同时存在时，主操作条抬高（Tab 约 50px） */
.phone-screen .footer.page-above-tab,
.phone-screen .bottom-bar.page-above-tab {
  bottom: 50px !important;
}

/* 全屏内容容器：与首页 .phone-screen 内布局一致 */
.phone-screen > .app {
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
  box-sizing: border-box;
  position: static !important;
}