/* 本文件由 _convert_wxss.py 从小程序 index 自动生成，请勿手改（改了会被覆盖）*/
/* 底部留白：必须同时让开「自定义 tabBar(calc(100 * var(--u))) + 底部固定按钮区(.footer 自身高约 calc(127 * var(--u)))」，
   否则滚到底时最末内容（拍摄指南卡）会紧贴按钮区上沿，视觉上像被压住。
   calc(240 * var(--u)) 时净间隙仅约 6px（实测），这里提到 calc(380 * var(--u))。
   此值需与 .current-tip 的 bottom 联动：留白拉开后要让「当前选择」那行落在
   卡片与按钮区之间、上下间距均衡（现约 29px / 26px），不能贴住按钮区。 */
.page {
  min-height: 100vh;
  padding-bottom: calc(calc(380 * var(--u)) + env(safe-area-inset-bottom));
}

.hero {
  background: linear-gradient(160deg, #3d6deb 0%, #5a8df5 100%);
  padding: calc(60 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u));
  color: #fff;
}
.hero-title {
  font-size: calc(48 * var(--u));
  font-weight: 700;
  letter-spacing: calc(2 * var(--u));
}
.hero-sub {
  margin-top: calc(14 * var(--u));
  font-size: calc(26 * var(--u));
  opacity: 0.88;
}

.banner {
  height: calc(160 * var(--u));
  margin: calc(-50 * var(--u)) calc(32 * var(--u)) 0;
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(61, 109, 235, 0.15);
}
.banner-item {
  height: calc(160 * var(--u));
  background: linear-gradient(120deg, #2b54c4, #4a7bee);
  color: #fff;
  padding: calc(30 * var(--u)) calc(36 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner-title { font-size: calc(32 * var(--u)); font-weight: 700; }
.banner-sub { font-size: calc(24 * var(--u)); opacity: 0.85; margin-top: calc(8 * var(--u)); }
.banner-img { width: 100%; height: 100%; display: block; border-radius: calc(20 * var(--u)); }

.notice {
  margin: calc(24 * var(--u)) calc(32 * var(--u)) 0;
  background: #fff7e6;
  border-radius: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(22 * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(23 * var(--u));
  color: #b7791f;
}
.notice-ico { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-right: calc(10 * var(--u)); }
.notice-text { flex: 1; }

.more {
  float: right;
  font-size: calc(24 * var(--u));
  color: #3d6deb;
  font-weight: 400;
}

.spec-grid { padding: 0 calc(24 * var(--u)); }
.spec-row {
  display: flex;
  flex-wrap: wrap;
}
.spec-card {
  position: relative;
  width: calc(25% - calc(16 * var(--u)));
  margin: calc(8 * var(--u));
  box-sizing: border-box;
  background: #fff;
  border-radius: calc(16 * var(--u));
  border: calc(3 * var(--u)) solid transparent;
  padding: calc(22 * var(--u)) calc(16 * var(--u));
  text-align: center;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(61, 109, 235, 0.05);
}
.spec-card--active {
  border-color: #3d6deb;
  background: #f0f5ff;
}
.spec-name { font-size: calc(26 * var(--u)); font-weight: 700; color: #1c2333; }
.spec-mm { margin-top: calc(6 * var(--u)); font-size: calc(20 * var(--u)); color: #3d6deb; }
.spec-hot {
  position: absolute;
  top: 0; left: 0;
  background: #ff7a45;
  color: #fff;
  font-size: calc(16 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(16 * var(--u)) 0 calc(16 * var(--u)) 0;
}
.spec-check {
  position: absolute;
  right: calc(10 * var(--u)); bottom: calc(8 * var(--u));
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  line-height: calc(32 * var(--u));
  text-align: center;
  border-radius: 50%;
  background: #3d6deb;
  color: #fff;
  font-size: calc(20 * var(--u));
}

.quick-row {
  display: flex;
  gap: calc(20 * var(--u));
  padding: 0 calc(32 * var(--u));
  margin-top: calc(28 * var(--u));
}
.quick-card {
  flex: 1;
  background: #fff;
  border-radius: calc(18 * var(--u));
  padding: calc(26 * var(--u));
  display: flex;
  flex-direction: column;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(61, 109, 235, 0.05);
}
.quick-ico { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.quick-name { font-size: calc(28 * var(--u)); font-weight: 700; margin-top: calc(12 * var(--u)); }
.quick-desc { font-size: calc(21 * var(--u)); color: #98a1b3; margin-top: calc(4 * var(--u)); }

.card.guide {
  margin: calc(30 * var(--u)) calc(32 * var(--u)) 0;
  padding: calc(30 * var(--u)) calc(32 * var(--u));
}
.guide-title { font-size: calc(30 * var(--u)); font-weight: 600; margin-bottom: calc(16 * var(--u)); }
.guide-item { font-size: calc(25 * var(--u)); color: #5c6780; line-height: 1.9; }
.guide-tip {
  margin-top: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  background: #fff7e6;
  border-radius: calc(12 * var(--u));
  font-size: calc(23 * var(--u));
  color: #b7791f;
  line-height: 1.7;
}

/* 底色选择 */
.color-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 calc(24 * var(--u));
}
.color-item {
  width: 16.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(12 * var(--u)) 0;
}
.color-dot {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #e3e7ef;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-dot--active { border: calc(4 * var(--u)) solid #3d6deb; }
.color-check {
  color: #fff;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  text-shadow: 0 0 calc(6 * var(--u)) rgba(0, 0, 0, 0.4);
}
.color-name {
  margin-top: calc(10 * var(--u));
  font-size: calc(22 * var(--u));
  color: #5c6780;
}

.current-tip {
  position: fixed;
  left: 0; right: 0;
  /* 让开 tabBar(calc(100 * var(--u))) + 底部按钮区(.footer 高约 calc(127 * var(--u))) + 呼吸间距，
     否则这行蓝字会贴在按钮区上沿（原 calc(140 * var(--u)) 时净间隙仅约 6px） */
  bottom: calc(calc(100 * var(--u)) + env(safe-area-inset-bottom) + calc(180 * var(--u)));
  text-align: center;
  font-size: calc(24 * var(--u));
  color: #3d6deb;
}

/* 底部按钮上移，避开自定义 tabBar（约 calc(100 * var(--u)) + 安全区） */
.footer {
  bottom: calc(calc(100 * var(--u)) + env(safe-area-inset-bottom));
}