@charset "UTF-8";
.skeleton-box {
  background: #fff;
  min-height: 100vh;
}
.skeleton-box .skeleton-img {
  width: 100%;
  height:round(down, calc(375 * var(--px)), 1px);
  background-color: #f6f6f6;
}
.skeleton-box .skeleton-txt {
  margin:round(down, calc(10 * var(--px)), 1px);
}
.skeleton-box .skeleton-txt .skeleton-title {
  width:calc(100% - 5.3333%);
  height:round(down, calc(24 * var(--px)), 1px);
  background-color: #f6f6f6;
  border-radius: round(down, calc(8 * var(--px)), 1px);
}
.skeleton-box .skeleton-txt .skeleton-adress {
  margin-top:round(down, calc(5 * var(--px)), 1px);
  width:calc(100% - 5.3333%);
  height:round(down, calc(10 * var(--px)), 1px);
  background-color: #f6f6f6;
  border-radius: round(down, calc(8 * var(--px)), 1px);
}
.skeleton-box .skeleton-txt .skeleton-time {
  margin-top: round(down, calc(10 * var(--px)), 1px);
  width:20.0000%;
  height:round(down, calc(10 * var(--px)), 1px);
  background-color: #f6f6f6;
  border-radius: round(down, calc(8 * var(--px)), 1px);
}
.skeleton-box .skeleton-txt .skeleton-price-list-box {
  margin:round(down, calc(25 * var(--px)), 1px);
  background-color: #FFFFFF;
  border-radius:round(down, calc(5 * var(--px)), 1px);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.skeleton-box .skeleton-txt .skeleton-price-list-box .price-list-item-1 {
  color: #c6c6c7;
  height: 80%;
  flex: 33%;
  text-align: center;
}
.skeleton-box .skeleton-txt .skeleton-price-list-box .price-list-item {
  background: #f6f6f6;
  flex: 50%;
  height:round(down, calc(25 * var(--px)), 1px);
  border-radius: round(down, calc(4 * var(--px)), 1px);
}
.skeleton-box .skeleton-txt .skeleton-info {
  margin-top:round(down, calc(25 * var(--px)), 1px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.skeleton-box .skeleton-txt .skeleton-info .skeleton-info-left {
  background-color: #f6f6f6;
  border-radius: round(down, calc(8 * var(--px)), 1px);
  height:round(down, calc(10 * var(--px)), 1px);
  width:13.3333%;
}
.skeleton-box .skeleton-txt .skeleton-info .skeleton-info-right {
  display: flex;
  flex-direction: column;
  margin-left:round(down, calc(10 * var(--px)), 1px);
  flex: 1;
}
.skeleton-box .skeleton-txt .skeleton-info .skeleton-info-right span {
  width:40.0000%;
  height:round(down, calc(10 * var(--px)), 1px);
  border-radius:round(down, calc(4 * var(--px)), 1px);
  background-color: #f6f6f6;
  margin-bottom:round(down, calc(10 * var(--px)), 1px);
}

.jfdh-img {
  animation: pulse 1.3s infinite;
  font-size: round(down, calc(18 * var(--px)), 1px);
  font-weight: bold;
  background: linear-gradient(135deg, #ffcc34, #fd3c8c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  font-style: italic;
  padding:round(down, calc(10 * var(--px)), 1px);
}

.tab-bg {
  color: red;
}

.integral-box {
  background: #fff;
  padding:0 round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}

.price-list-box {
  margin:round(down, calc(10 * var(--px)), 1px);
  padding:round(down, calc(10 * var(--px)), 1px);
  background-color: #FFFFFF;
  border-radius:round(down, calc(5 * var(--px)), 1px);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.price-list-box .price-list-item-1 {
  color: #c6c6c7;
  height: 80%;
  flex: 33%;
  text-align: center;
}
.price-list-box .price-list-item {
  position: relative;
  color: #606266;
  font-size: round(down, calc(15 * var(--px)), 1px);
  flex: 33%;
  text-align: center;
}
.price-list-box .price-list-tag {
  display: block;
  position: absolute;
  top:-5px;
  right:-20px;
  height:round(down, calc(15 * var(--px)), 1px);
  background: linear-gradient(270deg, #FF9AC3 0%, #FF9AC3 100%);
  border-radius:round(down, calc(7 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px) 0px;
  font-weight: 400;
  font-size: round(down, calc(10 * var(--px)), 1px);
  color: #FFFFFF;
  text-align: center;
  line-height:round(down, calc(15 * var(--px)), 1px);
  animation: pulse 1.3s infinite;
  /* 老站实测高 19 = 行高 15 + 上下 padding 2 —— content-box */
  padding:round(down, calc(2 * var(--px)), 1px);
  box-sizing: content-box;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.scroll-top {
  position: fixed;
  right:round(down, calc(10 * var(--px)), 1px);
  bottom:round(down, calc(120 * var(--px)), 1px);
  width:9.3333%;
  height:round(down, calc(35 * var(--px)), 1px);
  z-index: 99;
}
.scroll-top img {
  width: 100%;
  height: 100%;
}

.btns {
  position: fixed;
  z-index: 55;
  bottom: 0;
  /* #ifndef H5 */
  left: 0;
  width: 100%;
  /* #endif */
  /* #ifdef H5 */
  /* 移动端：占满屏幕宽度 */
  left: 0;
  right: 0;
  width: 100%;
  /* #endif */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-sizing: border-box;
  padding:0 round(down, calc(10 * var(--px)), 1px);
  height:calc(calc(50 * var(--px)) + constant(safe-area-inset-bottom));
  height:calc(calc(50 * var(--px)) + env(safe-area-inset-bottom));
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
}
/* ⚠ stretch 不是 center：老站 .btns-img 是撑满整条的（375 下实测 50 高，
   center 的话只有 42）。和 doctor-detail.css / project-detail.css 保持一致。 */
.btns .btns-detail {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap:round(down, calc(10 * var(--px)), 1px);
}
/* ⚠ .btns-img / .h5-app-text / .orderpoint 的定义统一在 app.css
   （数值照 pages/doctor/detail.vue 的 SCSS 实测）。这里原来那几条是早期
   凭印象写的：图标宽用了百分比、气泡是纯色 #FE739D 而不是渐变、字号 9 而不是 10。
   删掉，避免覆盖正确的定义。 */
.btns .btns-detail .btns-right {
  /* 宽度/收缩统一在 app.css（flex: 0 1 190px） */
  height:round(down, calc(40 * var(--px)), 1px);
  background: #FF9AC3;
  border-radius:round(down, calc(20 * var(--px)), 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: round(down, calc(15 * var(--px)), 1px);
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  position: relative;
}
.btns .btns-detail .btns-consult {
  background: #00c853;
  animation: breathe 2s ease-in-out infinite;
  box-shadow:0 0 round(down, calc(10 * var(--px)), 1px) rgba(0, 200, 83, 0.6);
}
.btns .btns-detail .btns-consult .custom-icon-kefu1 {
  margin-right:round(down, calc(5 * var(--px)), 1px);
  font-size: round(down, calc(16 * var(--px)), 1px);
  animation: icon-pulse 1.5s ease-in-out infinite;
}
.btns .btns-detail .haschat {
  background: #00c853;
  animation: breathe 2s ease-in-out infinite;
  box-shadow:0 0 round(down, calc(10 * var(--px)), 1px) rgba(0, 200, 83, 0.6);
}
.btns .btns-detail .notchat {
  background: #bfbfbf;
  box-shadow:0 0 round(down, calc(10 * var(--px)), 1px) #bfbfbf;
}
.btns .btns-detail .btns-img {
  width:10.6667%;
  /* 稍微加大点空间 */
  text-align: center;
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: Microsoft YaHei-Light, Microsoft YaHei;
  font-weight: 300;
  color: #666666;
}
.btns .btns-detail .btns-img span {
  max-width: 100%;
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 溢出隐藏 */
  text-overflow: ellipsis;
  display: inline-block;
}
.btns .btns-detail .btns-img .img-box {
  position: relative;
  display: inline-block;
  width: round(down, calc(25 * var(--px)), 1px);
  height:round(down, calc(25 * var(--px)), 1px);
}
.btns .btns-detail .btns-img .img-box img {
  width: round(down, calc(25 * var(--px)), 1px);
  height:round(down, calc(25 * var(--px)), 1px);
  margin-bottom:round(down, calc(2 * var(--px)), 1px);
}
.btns .btns-detail .btns-img {
  /* 在线状态小绿点 */
}
.btns .btns-detail .btns-img .online-dot {
  position: absolute;
  right:-2px;
  top: 0;
  width: round(down, calc(6 * var(--px)), 1px);
  height:round(down, calc(6 * var(--px)), 1px);
  background-color: #00c853;
  /* 绿色 */
  border-radius: 50%;
  border:1px solid #fff;
  /* 加个白边更清晰 */
}
.btns .btns-detail {
  /* #ifdef H5 */
  /* APP下载弹窗 */
}
.btns .btns-detail .app-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btns .btns-detail .app-popup {
  position: relative;
  background: #fff;
  border-radius:round(down, calc(12 * var(--px)), 1px);
  padding:round(down, calc(30 * var(--px)), 1px) round(down, calc(24 * var(--px)), 1px) round(down, calc(20 * var(--px)), 1px);
  text-align: center;
  width:69.3333%;
}
.btns .btns-detail .app-popup-title {
  font-size: round(down, calc(15 * var(--px)), 1px);
  font-weight: 600;
  color: #333;
  margin-bottom:round(down, calc(12 * var(--px)), 1px);
}
.btns .btns-detail .app-popup-close {
  position: absolute;
  top:round(down, calc(8 * var(--px)), 1px);
  right:round(down, calc(10 * var(--px)), 1px);
  font-size: round(down, calc(16 * var(--px)), 1px);
  color: #999;
  cursor: pointer;
  width:6.4000%;
  height:round(down, calc(24 * var(--px)), 1px);
  line-height:round(down, calc(24 * var(--px)), 1px);
  text-align: center;
}
.btns .btns-detail .app-popup-link {
  display: block;
}
.btns .btns-detail .app-popup-qrcode {
  width:48.0000%;
  height:round(down, calc(180 * var(--px)), 1px);
}
.btns .btns-detail .app-popup-tip {
  margin-top:round(down, calc(12 * var(--px)), 1px);
  font-size: round(down, calc(13 * var(--px)), 1px);
  color: #666;
}
.btns .btns-detail {
  /* #endif */
}

.more {
  padding: 0;
}
.more .list {
  background: #FFFFFF;
  border-radius: 0;
  padding:round(down, calc(7 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
  margin-bottom:round(down, calc(12 * var(--px)), 1px);
}
.more .list .list-address {
  display: flex;
  align-items: center;
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #999999;
}
.more .list .list-address img {
  width: round(down, calc(10 * var(--px)), 1px);
  height:round(down, calc(12 * var(--px)), 1px);
  margin-right:round(down, calc(5 * var(--px)), 1px);
}
.more .list .list-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.more .list .list-box div {
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #EB689E;
  flex-shrink: 0;
  margin-bottom:round(down, calc(10 * var(--px)), 1px);
  background: #FFEEF5;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  padding:round(down, calc(3 * var(--px)), 1px) round(down, calc(14 * var(--px)), 1px);
  margin-right:round(down, calc(5 * var(--px)), 1px);
}
.more .list .list-title {
  font-size: round(down, calc(17 * var(--px)), 1px);
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1B1B1B;
  margin-bottom:round(down, calc(9 * var(--px)), 1px);
}
.more .list .list-img {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom:round(down, calc(15 * var(--px)), 1px);
}
.more .list .list-img .list-img-left {
  flex: 2;
  height:round(down, calc(133 * var(--px)), 1px);
}
.more .list .list-img .list-img-left img {
  width: 100%;
  height: 100%;
  border-radius:round(down, calc(10 * var(--px)), 1px);
}
.more .list .list-img .list-img-right {
  flex: 3;
  height:round(down, calc(133 * var(--px)), 1px);
  margin-left:round(down, calc(5 * var(--px)), 1px);
}
.more .list .list-img .list-img-right img {
  width: 100%;
  height: 100%;
  border-radius:round(down, calc(10 * var(--px)), 1px);
}

.comment-more {
  width: 100%;
  display: flex;
  justify-content: center;
}
.comment-more div {
  display: flex;
  align-items: center;
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #666666;
}
.comment-more div img {
  width: round(down, calc(18 * var(--px)), 1px);
  height:round(down, calc(18 * var(--px)), 1px);
}

.comment {
  width:94.6667%;
  background: #FFFFFF;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  box-sizing: border-box;
  padding:round(down, calc(11 * var(--px)), 1px) round(down, calc(8 * var(--px)), 1px);
  margin: 0 auto;
}
.comment .comment-list .br {
  width: 100%;
  height:0px;
  background-color: #F1F1F1;
  margin:round(down, calc(12 * var(--px)), 1px) 0;
}
.comment .comment-list .comment-detail {
  font-size: round(down, calc(13 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height:round(down, calc(20 * var(--px)), 1px);
  margin-bottom:round(down, calc(8 * var(--px)), 1px);
}
.comment .comment-list .comment-img {
  display: flex;
  flex-wrap: wrap;
}
.comment .comment-list .comment-img div {
  width: 100%;
  height:round(down, calc(105 * var(--px)), 1px);
  margin:0 round(down, calc(4 * var(--px)), 1px) round(down, calc(8 * var(--px)), 1px);
}
.comment .comment-list .comment-img div img {
  width: 100%;
  height: 100%;
  border-radius:round(down, calc(7 * var(--px)), 1px);
}
.comment .comment-list .comment-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom:round(down, calc(5 * var(--px)), 1px);
}
.comment .comment-list .comment-title .comment-title-left {
  display: flex;
  align-items: center;
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #1B1B1B;
}
.comment .comment-list .comment-title .comment-title-left img {
  width: round(down, calc(30 * var(--px)), 1px);
  height:round(down, calc(30 * var(--px)), 1px);
  border-radius: 50%;
  margin-right:round(down, calc(5 * var(--px)), 1px);
}
.comment .comment-list .comment-title .comment-title-right {
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}

.case > div:last-child {
  margin-bottom:0px !important;
}

.case {
  width: 100%;
  background: #fff;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  box-sizing: border-box;
  padding:round(down, calc(8 * var(--px)), 1px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.case .case-list {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom:round(down, calc(12 * var(--px)), 1px);
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
}
.case .case-list .case-item {
  width:calc(50% - 2.6667%);
  height:round(down, calc(210 * var(--px)), 1px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  overflow: hidden;
}
.case .case-list .cae-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.case .case-list .nologin {
  filter: blur(round(down, calc(10 * var(--px)), 1px));
}
.case .case-list .case-top {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.case .case-list .case-top .case-img {
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
}
.case .case-list .case-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  padding:round(down, calc(5 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}
.case .case-list .case-bottom .case-title {
  font-size: round(down, calc(12 * var(--px)), 1px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 设置为2表示只显示两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom:round(down, calc(11 * var(--px)), 1px);
}
.case .case-list .case-bottom .case-user {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.case .case-list .case-bottom .case-user img {
  width: round(down, calc(20 * var(--px)), 1px);
  height:round(down, calc(20 * var(--px)), 1px);
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-right:round(down, calc(7 * var(--px)), 1px);
}
.case .case-list .case-bottom .case-user span {
  font-size: round(down, calc(12 * var(--px)), 1px);
  color: #afafaf;
}

.expert::-webkit-scrollbar {
  display: none;
}

.expert {
  width:calc(100% - 1.6000%);
  margin: 0 auto;
  background: #FFFFFF;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  box-sizing: border-box;
  padding:round(down, calc(8 * var(--px)), 1px) round(down, calc(3 * var(--px)), 1px);
  overflow-y: scroll;
  display: flex;
}
.expert .expert-detail {
  flex-shrink: 0;
  width:29.3333%;
  margin:0 round(down, calc(5 * var(--px)), 1px);
  text-align: center;
  background: #FFFFFF;
  box-shadow:0px 1px round(down, calc(3 * var(--px)), 1px) 0px rgba(168, 168, 168, 0.1);
  border-radius:round(down, calc(4 * var(--px)), 1px);
}
.expert .expert-detail .expert-img {
  width: 100%;
  height:round(down, calc(141 * var(--px)), 1px);
}
.expert .expert-detail .expert-img img {
  width: 100%;
  height: 100%;
  border-radius:round(down, calc(7 * var(--px)), 1px);
}
.expert .expert-detail .expert-title {
  font-size: round(down, calc(14 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  margin:round(down, calc(10 * var(--px)), 1px) 0 round(down, calc(3 * var(--px)), 1px);
}
.expert .expert-detail .expert-span {
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #A1A1A1;
  padding-bottom:round(down, calc(9 * var(--px)), 1px);
}

.project {
  width:calc(100% - 4.2667%);
  background: #FFFFFF;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding:round(down, calc(8 * var(--px)), 1px);
}
.project .project-top {
  margin-bottom:0px !important;
}
.project .project-detail {
  flex-shrink: 0;
  width:calc(50% - 1.0667%);
  margin-bottom:round(down, calc(15 * var(--px)), 1px);
}
/* ⚠ 老站的项目图比我高 5px —— 不是尺寸不同（都是 168x110），是**行内基线空隙**：
   uni-app 的 <image> 编译成 uni-image，默认 inline-block，底下会留一条基线空隙；
   我的 <img> 被全局 `img { display:block }` 变成块级，没有这条空隙。
   实测 375 下差 5px、630 下差 6px（跟着字号缩放）。
   这里让它也走 inline-block，用同一个机制产生同样的空隙。 */
.project .project-detail img { display: inline-block; vertical-align: baseline; }
.project .project-detail img {
  width: 100%;
  height:round(down, calc(110 * var(--px)), 1px);
  border-radius:round(down, calc(7 * var(--px)), 1px);
}
.project .project-detail .two-ellipsis {
  margin-top:round(down, calc(5 * var(--px)), 1px);
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project .project-detail .project-price-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top:round(down, calc(5 * var(--px)), 1px);
}
.project .project-detail .project-price-box .project-price-value {
  font-size: round(down, calc(12 * var(--px)), 1px);
  color: #EF5189;
  font-weight: 700;
}
.project .project-detail .project-price-box .project-price-value .project-price-currency {
  font-size: round(down, calc(10 * var(--px)), 1px);
}
.project .project-detail .project-price-box .project-price-value .project-price-unit {
  font-size: round(down, calc(10 * var(--px)), 1px);
  color: #606060;
  font-weight: normal;
}

.head {
  padding:round(down, calc(20 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head .head-left {
  display: flex;
  align-items: center;
  font-size: round(down, calc(14 * var(--px)), 1px);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #1B1B1B;
}
.head .head-left div {
  width:0.5333%;
  height:round(down, calc(13 * var(--px)), 1px);
  background: #333333;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  margin-right:round(down, calc(6 * var(--px)), 1px);
}
.head .head-left span {
  font-size: round(down, calc(11 * var(--px)), 1px);
  color: #6d6d6d;
}
.head .head-right {
  display: flex;
  align-items: center;
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #A1A1A1;
}
.head .head-right img {
  width: round(down, calc(5 * var(--px)), 1px);
  height:round(down, calc(9 * var(--px)), 1px);
  margin-left:round(down, calc(6 * var(--px)), 1px);
}

.center-img {
  width: 100%;
  height:round(down, calc(111 * var(--px)), 1px);
  margin:round(down, calc(11 * var(--px)), 1px) auto 0px;
}
.center-img img {
  width: 100%;
  height: 100%;
  border-radius:round(down, calc(10 * var(--px)), 1px);
}

.tab {
  width: 100%;
  display: flex;
  align-items: center;
  padding:round(down, calc(19 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}
.tab .tab-detail {
  font-size: round(down, calc(14 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #656565;
  margin-right:round(down, calc(25 * var(--px)), 1px);
}
.tab .tab-active {
  font-size: round(down, calc(15 * var(--px)), 1px);
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  position: relative;
}
.tab .tab-detail-active {
  position: absolute;
  width: 100%;
  left: 0;
  bottom:-2px;
  display: flex;
  justify-content: center;
}
.tab .tab-detail-active div {
  width:4.0000%;
  height:round(down, calc(3 * var(--px)), 1px);
  background: #FF9AC3;
  border-radius:round(down, calc(5 * var(--px)), 1px);
}

.body {
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding-bottom:round(down, calc(95 * var(--px)), 1px);
}

.title {
  background-color: #ffffff;
  padding:round(down, calc(10 * var(--px)), 1px);
}
.title .addres-title {
  font-size: round(down, calc(13 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  margin:round(down, calc(13 * var(--px)), 1px) 0 round(down, calc(6 * var(--px)), 1px);
}
.title .addres {
  display: flex;
  align-items: center;
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #999999;
}
.title .addres img {
  width: round(down, calc(10 * var(--px)), 1px);
  height:round(down, calc(12 * var(--px)), 1px);
  flex-shrink: 0;
  margin-right:round(down, calc(4 * var(--px)), 1px);
}
.title .title-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom:round(down, calc(14 * var(--px)), 1px);
  margin-top:round(down, calc(12 * var(--px)), 1px);
}
.title .title-list .title-list-left {
  display: flex;
  align-items: center;
  font-size: round(down, calc(11 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}
.title .title-list .title-list-left .title-list-detail {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right:round(down, calc(24 * var(--px)), 1px);
}
.title .title-list .title-list-left .title-list-detail img {
  width: round(down, calc(18 * var(--px)), 1px);
  height:round(down, calc(18 * var(--px)), 1px);
  margin-right:round(down, calc(5 * var(--px)), 1px);
}
.title .title-list .title-list-right {
  display: flex;
  align-items: center;
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #AAAAAA;
}
.title .title-list .title-list-right img {
  width: round(down, calc(20 * var(--px)), 1px);
  height:round(down, calc(20 * var(--px)), 1px);
}
.title .title-time {
  padding-top:round(down, calc(17 * var(--px)), 1px);
  display: flex;
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.title .title-time .title-time-left {
  height: 100%;
  flex-shrink: 0;
}
.title .title-time .title-time-list div {
  flex-shrink: 0;
  margin-right:round(down, calc(10 * var(--px)), 1px);
  margin-bottom:round(down, calc(5 * var(--px)), 1px);
}
.title .title-address {
  display: flex;
  align-items: center;
  font-size: round(down, calc(13 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  margin:round(down, calc(18 * var(--px)), 1px) 0 round(down, calc(3 * var(--px)), 1px);
}
.title .title-address img {
  flex-shrink: 0;
  width: round(down, calc(15 * var(--px)), 1px);
  height:round(down, calc(17 * var(--px)), 1px);
  margin-right:round(down, calc(4 * var(--px)), 1px);
}
.title .title-english {
  font-size: round(down, calc(11 * var(--px)), 1px);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-bottom:round(down, calc(3 * var(--px)), 1px);
}
.title .bold-font {
  color: rgba(252, 98, 144, 0.8196078431);
}
.title .title-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: round(down, calc(20 * var(--px)), 1px);
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1B1B1B;
  margin-bottom:round(down, calc(2 * var(--px)), 1px);
}
.title .title-name .share {
  width: round(down, calc(25 * var(--px)), 1px);
  height:round(down, calc(25 * var(--px)), 1px);
  flex-shrink: 0;
  margin-left:round(down, calc(10 * var(--px)), 1px);
}
.title .title-name .share img {
  width: 100%;
  height: 100%;
}

.swiper-body {
  position: relative;
  width: 100%;
  /* #ifndef H5 */
  height:round(down, calc(375 * var(--px)), 1px);
  /* #endif */
  /* #ifdef H5 */
  height: 0;
  padding-bottom: 100%;
  /* #endif */
}

.current {
  position: absolute;
  right:round(down, calc(10 * var(--px)), 1px);
  bottom:round(down, calc(24 * var(--px)), 1px);
  background: rgba(51, 51, 51, 0.5);
  border-radius:round(down, calc(10 * var(--px)), 1px);
  padding:round(down, calc(3 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px);
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}
.current div {
  display: flex;
  align-items: center;
  border-left:0px solid #ffffff;
  padding-left:round(down, calc(6 * var(--px)), 1px);
  margin-left:round(down, calc(6 * var(--px)), 1px);
}
.current div img {
  width: round(down, calc(10 * var(--px)), 1px);
  height:round(down, calc(9 * var(--px)), 1px);
  margin-right:round(down, calc(2 * var(--px)), 1px);
}

.swiper {
  width: 100%;
  /* #ifndef H5 */
  height:round(down, calc(375 * var(--px)), 1px);
  /* #endif */
  /* #ifdef H5 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* #endif */
}

.video {
  width: 100%;
  height:round(down, calc(425 * var(--px)), 1px);
  background-color: #000;
  position: relative;
}
.video .video-out {
  position: absolute;
  width: 100%;
  left: 0;
  bottom:round(down, calc(15 * var(--px)), 1px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video .video-out .video-out-detail {
  text-align: center;
  line-height:round(down, calc(20 * var(--px)), 1px);
  height:round(down, calc(20 * var(--px)), 1px);
  width:14.6667%;
  background-color: #f5f5f5;
  border-radius:round(down, calc(9 * var(--px)), 1px);
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #333333;
}

.swiper-item {
  width: 100%;
  /* #ifndef H5 */
  height:round(down, calc(375 * var(--px)), 1px);
  /* #endif */
  /* #ifdef H5 */
  height: 100%;
  /* #endif */
  position: relative;
}
.swiper-item .swiper-play {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.swiper-item .swiper-play img {
  width: round(down, calc(45 * var(--px)), 1px);
  height:round(down, calc(45 * var(--px)), 1px);
}
.swiper-item .swiper-img {
  width: 100%;
  height: 100%;
}

.u-tabs {
  overflow: hidden;
}

/* 呼吸灯动画 */
@keyframes breathe {
  0%, 100% {
    box-shadow:0 0 round(down, calc(10 * var(--px)), 1px) rgba(0, 200, 83, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow:0 0 round(down, calc(20 * var(--px)), 1px) rgba(0, 200, 83, 0.9);
    transform: scale(1.02);
  }
}
/* 图标跳动动画 */
@keyframes icon-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  10% {
    transform: translateY(-1.0667cqw) scale(1.15);
  }
  20% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-0.5333cqw) scale(1.08);
  }
  40% {
    transform: translateY(0) scale(1);
  }
}
.lazy-placeholder {
  height: 1px;
  overflow: hidden;
}
/* ── SSR 补充：轮播无 JS 时的静态呈现 ──
   老站是 uni-app <swiper>，横向轮播。SSR 直出全部 <img> 便于爬虫抓取，
   但必须横向排列 + 溢出隐藏，否则 9 张图竖着堆，页面高度翻倍。 */
.swiper-body { overflow: hidden; }
.swiper-body .swiper { overflow: hidden; }
.swiper-body .swiper-track { display: flex; flex-wrap: nowrap; }
.swiper-body .swiper-item { flex: 0 0 100%; width: 100%; }
.swiper-body .swiper-img { width: 100%; display: block; }

/* ── SSR 补充：老站有但 CSS 里缺的两个类 ── */
/* 评价头部一行：星+评分 | 头像名字 | 翻译 */
.feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:round(down, calc(9.8 * var(--px)), 1px);
  margin-bottom:round(down, calc(6 * var(--px)), 1px);
}
/* ⚠ 这条早期规则给了 gap —— 老站没有，星星之间的间距是 .star 的 margin-right:1px。
   6 个子项 5 个间隙，多出 20px，实测 .star-rating 从 78 撑到 100。
   正确的定义在本文件末尾「评论区」那一段。 */
.feedback-row .feedback-header {
  display: flex;
  align-items: center;
  gap:round(down, calc(4.9 * var(--px)), 1px);
  margin-left: auto;
}
/* 头像和「翻译」按钮的定义在本文件末尾「评论区」那一段（照实测重写过）。
   这里原来那两条是早期从 PHP 版抄的，实测老站头像是 20x20 不是 24x24。 */

/* 医院名右侧分享按钮 */
.share-btn {
  flex: none;
  width: round(down, calc(34.9 * var(--px)), 1px); height:round(down, calc(25.1 * var(--px)), 1px);
  display: flex; align-items: center; justify-content: flex-end;
  color: #666;
}

/* ── 校准：以下三处经 Playwright 实测老站后对齐 ──
   数值来自 scripts/measure.mjs 的逐元素比对，不是估的。 */

/* tabs：老站用 uview 的 .u-tabs__wrapper__nav__item__text（15px）。
   PHP 模板换成了 .u-tabs__item 但没带字号声明，会继承 body 的 16px。 */
.custom-tabs .u-tabs__item {
  font-size: round(down, calc(15 * var(--px)), 1px);          /* 15px @375 */
  color: #606266;
}
.custom-tabs .u-tabs__item.on {
  color: #303133;
}

/* 「翻译」按钮：老站 14px */
.feedback-row .toggle-lang,
.case-user .toggle-lang { font-size: round(down, calc(14 * var(--px)), 1px); }

/* 评分数字：老站 10px，cqw 版原值偏大 1px */
.star-rating .rating-num { font-size: round(down, calc(10 * var(--px)), 1px); }

/* 评价里的用户名：老站是小字，app.css 的 .username 带了大字号，要压回去 */
/* 评论者昵称：老站 10px / rgb(140,140,140)。app.css 的 .username 是大字号，要压回去 */
.feedback-list-component .feedback-item .username,
.feedback-row .feedback-header .username {
  font-size: round(down, calc(10 * var(--px)), 1px);
  font-weight: 400;
  color: rgb(140, 140, 140);
}

/* ══════════════════════════════════════════════════════════════
 * 全量审计校准（scripts/audit.mjs 逐元素比对老站后修正）
 * 所有数值来自实测或老站 uni-app 源码，非估值。
 * ══════════════════════════════════════════════════════════════ */

/* 顶部导航标题：老站 uni-page-head__title 是 700 / 纯黑 */
.detail-nav .detail-nav__title { font-weight: 700; color: rgb(0, 0, 0); }

/* 星号：老站 11px（我原先 12px） */
.star-rating .stars .star { font-size: round(down, calc(11 * var(--px)), 1px); }

/* 评分数字：老站 10px。用三级选择器压过 app.css */
.feedback-list-component .star-rating .rating-num,
.feedback-row .star-rating .rating-num { font-size: round(down, calc(10 * var(--px)), 1px); }

/* 「翻译」：老站色值是 rgb(253,131,171)，比我用的 #fc6290 浅 */
.feedback-row .toggle-lang,
.case-user .toggle-lang { color: rgb(253, 131, 171); }

/* tabs 配色：老站选中 rgb(48,49,51)，未选中 rgb(96,98,102) */
.custom-tabs .u-tabs__item { color: rgb(96, 98, 102) !important; }
.custom-tabs .u-tabs__item.on { color: rgb(48, 49, 51) !important; }

/* ⚠ .expert-text 在 cqw CSS 里被错误命名成 .expert-span，导致模板里
   .expert-text 完全没有样式、继承 body 的 16px。
   数值取自老站源码 pages/detail/detail.vue:2260（24rpx / 300 / #A1A1A1）。 */
.expert .expert-detail .expert-text {
  font-size: round(down, calc(12 * var(--px)), 1px);
  font-weight: 300;
  color: #A1A1A1;
  padding-bottom:round(down, calc(9 * var(--px)), 1px);
}

/* 「活动明细」的 hot 角标（老站是橙红渐变，区别于价格的粉色） */
.price-list-box .price-list-tag-hot {
  background: linear-gradient(90deg, #FF7A45 0%, #FF4D4F 100%);
}

/* 周边设施的「新」角标 */
.custom-tabs .tab-badge {
  display: inline-block;
  font-size: round(down, calc(11 * var(--px)), 1px);   /* 老站 11px */
  color: #fff;
  background: #FF4D4F;
  border-radius:round(down, calc(10 * var(--px)), 1px);
  padding:0 round(down, calc(6 * var(--px)), 1px);
  margin-left:round(down, calc(3 * var(--px)), 1px);
  vertical-align: middle;
  line-height:round(down, calc(15 * var(--px)), 1px);
}

/* app.css 用的是 5 层选择器 .feedback-list-component .feedback-item
   .star-rating .stars .star（优先级 0,5,0），必须同级或更高才压得住。 */
.feedback-list-component .feedback-item .star-rating .stars .star { font-size: round(down, calc(11 * var(--px)), 1px); }
.feedback-list-component .feedback-item .star-rating .rating-num { font-size: round(down, calc(10 * var(--px)), 1px); }

/* ── 首图：高度固定，宽度填满容器 ──
   老站设计是 750×750rpx 正方形（@375 = 375×375）。容器放到 750 后若继续保持
   1:1，会变成 750×750 占满整个首屏。按美卫士的做法（纵向尺寸固定），
   高度锁在 375px，宽度填满，超出部分裁切。 */
.swiper-body,
.swiper-body .swiper,
.swiper-body .swiper-track,
.swiper-body .swiper-item {
  height: round(down, calc(375 * var(--px)), 1px);
  /* 老站 H5 分支用 padding-bottom:100% 做 1:1 比例。百分比内边距按「宽度」算，
     容器变宽时会撑出一片空白，必须清掉。 */
  padding-bottom: 0;
}
.swiper-body .swiper-img {
  width: 100%;
  height: round(down, calc(375 * var(--px)), 1px);
  object-fit: cover;
}

/* ── 区块标题不能锁死宽度 ──
   .head-left 原本是 rpx 比例宽，转成固定 px 后在 750 容器下容不下文字，
   「用户反馈」「专家精选」会换行。标题按内容自适应即可。 */
.head .head-left {
  width: auto;
  flex: none;
  white-space: nowrap;
  align-items: center;
}
.head .head-right { width: auto; flex: none; white-space: nowrap; }

/* ── 专家精选卡片：图片填满卡片宽度，高度按比例 ──
   老站 @375 是 110×141（29.33×37.6cqw），比例 1:1.28。
   卡片宽度随容器变，图片跟着填满并保持这个比例。 */
.expert .expert-detail .expert-img {
  width: 100%;
  aspect-ratio: 110 / 141;
  height: auto;
}
.expert .expert-detail .expert-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 特色项目卡片图片：老站是 height:110px 固定（见本文件 664 行），
   不要用 aspect-ratio 覆盖 —— 那会让卡片矮 7px。宽度填满、高度固定、裁切。 */
.project .project-detail img {
  width: 100%;
  height: round(down, calc(110 * var(--px)), 1px);
  object-fit: cover;
}

/* 吸顶 tabs 高度对齐老站的 .u-tabs__wrapper（44px）。
   我原先用 padding:12px 上下撑到 70px，且「新」角标又顶高一截。 */
.u-sticky .custom-tabs { height: round(down, calc(44 * var(--px)), 1px); align-items: center; }
.custom-tabs .u-tabs__item { padding: 0 !important; line-height: round(down, calc(44 * var(--px)), 1px); }
.custom-tabs .tab-badge { line-height: round(down, calc(14 * var(--px)), 1px); vertical-align: 1px; }

/* 底部栏。
   ⚠ 这里原来是一组反推出来的硬值（.btns-img 固定 28、.btns-right flex:1）。
     那样写虽然在医院详情页上凑对了数字，但 flex-basis 变成 0，
     图标格就不会跟着收缩了 —— 医生页 / 项目页上实测 40 vs 老站的 28。
   现在改成照老站 SCSS 的原始声明（图标 80rpx=40、按钮 380rpx=190、间距 10），
   让四个按钮**等比收缩**：(355-30)/460 = 0.7065
     → 图标 40×0.7065 = 28.3 ✓   按钮 190×0.7065 = 134.2 ✓
   两页的实测值都能对上，定义统一在 app.css。 */

/* ══════════════════════════════════════════════════════════════
 * uni-app <image mode="aspectFill"> → CSS object-fit: cover
 *
 * 老站几乎所有图都是 mode="aspectFill"（等比填充+裁切）。PHP 转换时
 * 把 <image mode="..."> 变成了普通 <img>，mode 属性丢失，浏览器默认
 * object-fit: fill 会拉伸变形 —— 周边机构那些正方形原图（2048×2048）
 * 塞进 140×133 的框里就明显扁了。
 * ══════════════════════════════════════════════════════════════ */
.more .list .list-img .list-img-left img,
.more .list .list-img .list-img-right img,
.case .case-list .case-img,
.expert .expert-detail .expert-img img,
.project .project-detail img,
.swiper-body .swiper-img,
.feedback-images img,
.comment .comment-list .comment-img div img,
.sp_img img {
  object-fit: cover;
}


/* ==========================================================================
   评论区 —— 数值全部来自 localhost:8080/cn/hospital/secret-clinic 实测 @375。
   ⚠ 上一版我自己加了 .stars 包裹层、漏了 .header-left / .user-info，
     导致 .feedback-row 从 28px 撑到 169px。层级必须照原站
     components/FeedbackList.vue：
       .feedback-row（28px，横向一行）
         ├ .star-rating   78x17   .star 11x17（11px，margin-right 1px）+ .rating-num 15x14（10px，margin-left 3px）
         ├ .feedback-header 212x20  > .header-left 25x20 > .avatar 20x20（margin-right 5px）+ .user-info
         └ .language-change > .lang-selector > .language-togle 41x28（14px，padding 4px 6px，粉字）
   ========================================================================== */
.feedback-row {
  display: flex; align-items: center;
  margin: 0 0 round(down, calc(5 * var(--px)), 1px);
}
.feedback-row .star-rating {
  display: flex; align-items: center; flex-shrink: 0;
  height: round(down, calc(17 * var(--px)), 1px);
  gap: 0;   /* ⚠ 显式清零，别让别处的 gap 混进来（实测会多撑 20px） */
}
.feedback-row .star {
  font-size: round(down, calc(11 * var(--px)), 1px); line-height: round(down, calc(17 * var(--px)), 1px); margin-right: 1px; color: #ddd;
}
.feedback-row .star.active { color: rgb(255, 184, 0); }
.feedback-row .rating-num { font-size: round(down, calc(10 * var(--px)), 1px); line-height: round(down, calc(14 * var(--px)), 1px); margin-left: round(down, calc(3 * var(--px)), 1px); color: #999; }

/* 老站实测：无评分时 .feedback-header 宽 290（占满），有评分时 212。
   即它是 flex:1 吃掉剩余宽度，星级和「翻译」按钮各占固定宽。 */
.feedback-row .feedback-header {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: round(down, calc(20 * var(--px)), 1px);
}
.feedback-row .header-left { display: flex; align-items: center; height: round(down, calc(20 * var(--px)), 1px); }
.feedback-row .avatar {
  width: round(down, calc(20 * var(--px)), 1px); height: round(down, calc(20 * var(--px)), 1px); border-radius: 50%; object-fit: cover;
  margin-right: round(down, calc(5 * var(--px)), 1px); flex-shrink: 0; display: block;
}
.feedback-row .user-info { display: flex; align-items: center; }
.feedback-row .username { font-size: round(down, calc(10 * var(--px)), 1px); color: #999; }
.feedback-row .google-icon { width: round(down, calc(12 * var(--px)), 1px); height: round(down, calc(12 * var(--px)), 1px); margin-left: round(down, calc(4 * var(--px)), 1px); object-fit: contain; }

.feedback-row .language-change { flex-shrink: 0; }
.feedback-row .lang-selector { display: flex; }
.feedback-row .language-togle {
  font-size: round(down, calc(14 * var(--px)), 1px); line-height: round(down, calc(20 * var(--px)), 1px); padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(6 * var(--px)), 1px);
  color: rgb(253, 131, 171); background: none; border: 0; cursor: pointer;
}