:root {
    /**
     * 页面内容区宽度上限 —— 全站唯一的真值源，所有 max-width 都引它。
     *
     * 640 = 老站 H5 的实测值。老站 manifest.json 写的是
     *   "rpxCalcMaxDeviceWidth": 640
     * Playwright 实测老站容器：375→375、500→500、640→640、1440→**640**。
     *
     * ⚠ 之前这里写的是 750（照抄姊妹项目美卫士的数字），和老站差 110px ——
     *   用户从 SSR 页面点到老站的功能页（登录/预约/聊天）时，内容区会
     *   突然窄一截，一眼就看出是两个站。
     *
     * ⚠ 字号不跟着容器放大。实测老站在 375 和 1440 下同一个元素都是 15px，
     *   也就是「手机字号密排」，不是放大的手机。SSR 的字号一律固定 px，
     *   只有布局尺寸（padding/margin/宽高）用百分比或 cqw。两边模型一致。
     */
    --page-max: 640px;

    /**
     * 「设计像素」—— 全站尺寸的基准单位。
     *
     * ⚠ 老站是 uni-app，rpx 在加载时按**当前视口宽**算成 px，所以尺寸会
     *   随屏幕线性缩放；我原来全部写死成 375 下的值，结果只在 375 这一个
     *   宽度上对得上老站（实测 414 下最大偏差 118px、630 下 tabbar 差 35px）。
     *
     *   1px 设计稿 = 100vw / 375
     *     视口 375  → 1px      （和以前完全一样）
     *     视口 414  → 1.104px  （等比放大，和老站一致）
     *     视口 900  → 2.4px    （还在放大）
     *     视口 >960 → 固定 1px （老站在这里退回 375 的值）
     *
     * ⚠ 分界点是 **960 不是 640**。老站 manifest.json 里写的是
     *   `rpxCalcMaxDeviceWidth: 640`，但 uni-app 的 H5 CSS 转换**没吃这个值**，
     *   用的是它自己的默认 960。逐点实测老站发出的 `.action{font-size}`：
     *     940→27px  955→28px  960→28px  |  961→11px  970→11px  1000→11px
     *   我一开始按 manifest 写成 641，结果 641~960 这一段全错
     *   （视口 900 时老站字 26px、我 11px）。**以实测为准，不要信配置文件。**
     *
     * 用法：所有尺寸写成 calc(N * var(--px))，N 就是 375 下的 px 数。
     *      转换脚本：scripts/px2u.mjs   验证：scripts/uidiff.mjs
     */
    --px: calc(100vw / 375);
}

/* 超过 960 退回 375 的固定值 —— 逐点实测老站的分界就在 960/961 之间 */
@media (min-width: 961px) {
    :root { --px: 1px; }
}

/* ============================================================
 * BeautsGO 项目级业务样式
 *   uni.css       —— UniApp 编译产物（保留原项目类名）
 *   iconfont.css  —— 图标字体（编译产物）
 *   app.css       —— 本文件，项目级新增/覆盖样式（PHP SSR 专用）
 * ============================================================ */

/* 全局 reset 微调 */
html, body {
    margin: 0;
    padding: 0;
    /* ⚠ 这里原来有一条 font-family: -apple-system,... 已删。
       老站不设字体（实测全站 computed 是浏览器默认 Times），设了就和老站
       并排能看出差异 —— 英文和数字会从衬线变黑体。详见 app.vue 的说明。 */
    /* 画布底色统一走 app.vue 的 --page-bg，别在这里写死 */
    background: var(--page-bg, #ececec);
    color: #333;
    -webkit-font-smoothing: antialiased;
    /* 基准字号:12px(对齐 beauts_app 全局基础)。
       注意:.page-main 容器在桌面 = 640px,1cqw = 6.4px,字号不能用 cqw 否则桌面会放大到 20px+。
       字号一律 px;布局尺寸(padding/margin/宽高)才用 cqw。 */
    font-size: round(down, calc(12 * var(--px)), 1px);
    /* ⚠ 不要设全局 line-height。老站是 normal（中文约 1.4），
       设成 1.5 会让每个文本块高 2px，逐层累积后整页比老站高一截。 */
}

img { max-width: 100%; height: auto; display: block; }

/* SSR 页面布局基础（避免依赖 uni.css 的 scoped 选择器） */
/* 所有页面：内容区 640 居中，两侧留白走 --page-bg（见 app.vue） */
body { background: var(--page-bg, #ececec); }
.page-main {
    min-height: calc(100vh - round(down, calc(200 * var(--px)), 1px));
    max-width: var(--page-max);
    margin: 0 auto;
    background: #fff;
    position: relative;  /* 让 .detail-nav 的 sticky 锚到这里而不是 viewport */
    /* 让内部所有 cqw 单位基于此容器宽度（mobile≈viewport, 桌面=640px），等价 UniApp 750rpx 设计稿适配 */
    container-type: inline-size;
    container-name: page;
}
/* 真实 mobile H5 顶部没有 PC 全站导航，桌面端 1.png 截图也未显示 */
.site-header { display: none; }
/* 底部按钮 fixed 跟随 640 居中容器 */
.btns {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: var(--page-max);
}

/* ============================================================
 * 医院详情页 SSR 专属补丁
 *   仅覆盖 hospital-detail.css 不存在或需要 SSR 化的部分
 * ============================================================ */

/* 顶部吸顶 nav (mobile)：返回箭头 + 居中医院名 */
.detail-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    height:round(down, calc(44 * var(--px)), 1px);
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    padding:0 round(down, calc(15 * var(--px)), 1px);
}
.detail-nav__back {
    color: #1B1B1B;
    width:8%; height:round(down, calc(30 * var(--px)), 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.detail-nav__title {
    flex: 1;
    text-align: center;
    font-size: round(down, calc(16 * var(--px)), 1px);
    font-weight: 600;
    color: #1B1B1B;
    margin-right:round(down, calc(30 * var(--px)), 1px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 富文本介绍：让管理员后台上传的整版图自适应宽度 */
.text img { max-width: 100% !important; height: auto !important; display: block; margin: 0 auto; }
.text p { margin:0 0 round(down, calc(5 * var(--px)), 1px); }

/* "翻译" chip — 案例/评论右下角对齐 1.png（仅占位，无功能） */
.toggle-lang {
    display: inline-block;
    float: right;
    margin-left:round(down, calc(8 * var(--px)), 1px);
    padding:round(down, calc(2 * var(--px)), 1px) round(down, calc(8 * var(--px)), 1px);
    color: #EB689E;
    font-size: round(down, calc(10 * var(--px)), 1px);
    border: 1px solid #fbe1ec;
    border-radius:round(down, calc(24 * var(--px)), 1px);
    background: #fff5fa;
    line-height: 1.4;
}

/* ===== FeedbackList 完整样式 (1:1 移植 beauts_app/components/FeedbackList.vue scoped scss，rpx→cqw 1rpx=0.1333cqw) ===== */
.feedback-list-component { margin-bottom:round(down, calc(10 * var(--px)), 1px); }
.feedback-list-component .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;
}
.feedback-list-component .head .head-left {
    display: flex;
    align-items: center;
    font-size: round(down, calc(14 * var(--px)), 1px);
    font-weight: 500;
    color: #1B1B1B;
}
.feedback-list-component .head .head-left > div:first-child {
    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);
}
.feedback-list-component .head .head-right {
    display: flex;
    align-items: center;
    font-size: round(down, calc(10 * var(--px)), 1px);
    color: #A1A1A1;
}
.feedback-list-component .head .head-right img {
    width:1.3333%;
    height:round(down, calc(9 * var(--px)), 1px);
    margin-left:round(down, calc(6 * var(--px)), 1px);
}
.feedback-list-component .user-feedback {
    background: #FFFFFF;
    border-radius:round(down, calc(10 * var(--px)), 1px);
    padding:round(down, calc(12 * var(--px)), 1px);
    margin:round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) 0;
}
.feedback-list-component .user-feedback .tags {
    display: flex;
    flex-wrap: wrap;
}
.feedback-list-component .user-feedback .tags .tag {
    background: #fff6f9;
    border: 1px solid #FD83AB;
    color: #FD83AB;
    border-radius:round(down, calc(5 * var(--px)), 1px);
    padding:round(down, calc(3 * var(--px)), 1px) round(down, calc(5 * var(--px)), 1px);
    font-size: round(down, calc(11 * var(--px)), 1px);
    margin-right:round(down, calc(5 * var(--px)), 1px);
    margin-bottom:round(down, calc(10 * var(--px)), 1px);
    cursor: pointer;
}
.feedback-list-component .feedback-item {
    border-bottom: 1px solid #EAEAEA;
    padding-bottom:round(down, calc(10 * var(--px)), 1px);
    margin-bottom:round(down, calc(10 * var(--px)), 1px);
    position: relative;
}
.feedback-list-component .feedback-item .feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:round(down, calc(5 * var(--px)), 1px);
}
.feedback-list-component .feedback-item .feedback-header > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}
/* ⚠ 宽度不能用百分比：老站实测头像是 20x20 定值。
   百分比会随容器变宽而变形（桌面 750 容器下变成 40px）。 */
.feedback-list-component .feedback-item .avatar {
    width:round(down, calc(20 * var(--px)), 1px);
    height:round(down, calc(20 * var(--px)), 1px);
    border-radius: 50%;
    margin-right:round(down, calc(10 * var(--px)), 1px);
    object-fit: cover;
}
.feedback-list-component .feedback-item .user-info .username {
    display: flex;
    align-items: center;
    font-size: round(down, calc(10 * var(--px)), 1px);
    color: #8c8c8c;
}
.feedback-list-component .feedback-item .star-rating {
    display: flex;
    align-items: center;
    margin-bottom:round(down, calc(5 * var(--px)), 1px);
}
.feedback-list-component .feedback-item .star-rating .stars { display: flex; align-items: center; }
.feedback-list-component .feedback-item .star-rating .stars .star {
    font-size: round(down, calc(12 * var(--px)), 1px);
    color: #ddd;
    margin-right:round(down, calc(2 * var(--px)), 1px);
}
.feedback-list-component .feedback-item .star-rating .stars .star.active { color: #FFB800; }
.feedback-list-component .feedback-item .star-rating .rating-num {
    font-size: round(down, calc(11 * var(--px)), 1px);
    color: #999;
    margin-left:round(down, calc(5 * var(--px)), 1px);
}
.feedback-list-component .feedback-item .feedback-content {
    font-size: round(down, calc(14 * var(--px)), 1px);
    color: #333333;
    margin-bottom:round(down, calc(5 * var(--px)), 1px);
    line-height: 1.5;
}
.feedback-list-component .feedback-item .feedback-images {
    display: flex;
    flex-wrap: wrap;
}
.feedback-list-component .feedback-item .feedback-images img,
.feedback-list-component .feedback-item .feedback-images video {
    width:26.6667%;
    height:round(down, calc(100 * var(--px)), 1px);
    border-radius:round(down, calc(5 * var(--px)), 1px);
    margin-right:round(down, calc(5 * var(--px)), 1px);
    margin-bottom:round(down, calc(5 * var(--px)), 1px);
    border: 1px solid #EAEAEA;
    object-fit: cover;
}

/* App 下载弹窗：默认隐藏，:target 显示 (CSS 唯一切换) */
.app-popup-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}
.app-popup-mask:target { display: flex; }
.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%;
}
.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); }
.app-popup-close {
    position: absolute; top:round(down, calc(8 * var(--px)), 1px); right:round(down, calc(10 * var(--px)), 1px);
    width:6.4%; height:round(down, calc(24 * var(--px)), 1px); line-height:round(down, calc(24 * var(--px)), 1px);
    color: #999; font-size: round(down, calc(16 * var(--px)), 1px); text-align: center;
    text-decoration: none;
}
.app-popup-link { display: block; }
.app-popup-qrcode { width:48%; height:round(down, calc(180 * var(--px)), 1px); }
.app-popup-tip { margin-top:round(down, calc(12 * var(--px)), 1px); font-size: round(down, calc(13 * var(--px)), 1px); color: #666; }

/* 底部按钮的图标格。数值来自 pages/doctor/detail.vue 的 SCSS：
   .btns-img 宽 80rpx=40px、字 20rpx=10px、字重 300、色 #666；
   里面的图 50rpx=25px、下边距 5rpx=2.5px。
   ⚠ 字重必须写 300 —— 不写就是 400，实测「收藏」两字对不上。 */
.btns .btns-detail .btns-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 老站 SCSS：图标格 80rpx=40、按钮 380rpx=190、间距 20rpx=10。
       四个一起等比收缩：(355-30)/460 = 0.7065 → 图标 28.3、按钮 134.2，
       正好是老站的实测值。
       ⚠ 必须写成 `flex: 0 1 <基准>`：只写 width 的话，某些页面的
         `.btns-right` 曾被写成 flex:1（基准 0），图标格就一点都不收缩了
         —— 实测 40 vs 老站 28。 */
    flex: 0 1 round(down, calc(40 * var(--px)), 1px);
    /* ⚠ min-width:0 不能少：flex 项默认 min-width:auto，会被里面 25px 的图标
       和文字顶住不肯收缩，结果 4 个按钮挤不下（实测 40 vs 老站的 28）。 */
    min-width: 0;
    text-align: center;
    font-size: round(down, calc(10 * var(--px)), 1px);
    font-weight: 300;
    color: #666666;
    text-decoration: none;
}
/* <a> 默认会给里面的文字上链接色 —— 老站是 #666 */
a.btns-img, a.btns-img span { color: #666666; }
.btns .btns-detail .btns-img img { width:round(down, calc(25 * var(--px)), 1px); height:round(down, calc(25 * var(--px)), 1px); margin-bottom:round(down, calc(3 * var(--px)), 1px); }
.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 .h5-app-text { font-size: round(down, calc(10 * var(--px)), 1px); color: #666; }
/* 按钮条本身撑满 .btns 的 50px（100rpx） */
/* 老站实测 .btns-img 高 50（撑满整条），.btns-right 高 40 居中 */
.btns .btns-detail { height: 100%; align-items: stretch; }
.btns .btns-detail .btns-right { align-self: center; }
.btns .btns-detail .btns-right { flex: 0 1 round(down, calc(190 * var(--px)), 1px); min-width: 0; }
/* 「下单送积分」气泡：老站 20rpx=10px（我之前写成 9px），高 40rpx=20px，
   最小宽 156rpx=78px，padding 0 6px */
/* ⚠ min-width 老站 SCSS 写的是 156rpx(=78)，但实测渲染出来是 90 —— 以实测为准 */
.btns .btns-detail .orderpoint {
    position: absolute; top:-10px; left: 46%;
    transform: translateX(-50%);
    min-width:round(down, calc(90 * var(--px)), 1px); height:round(down, calc(20 * var(--px)), 1px); padding:0 round(down, calc(6 * var(--px)), 1px);
    background: linear-gradient(270deg, #fd6a69 0%, #fe2c39 100%);
    border-radius:round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) round(down, calc(3 * var(--px)), 1px);
    font-weight: 400; font-size:round(down, calc(10 * var(--px)), 1px); color: #ffffff;
    text-align: center; line-height:round(down, calc(20 * var(--px)), 1px); white-space: nowrap;
}

/* ============================================================
 * 全局语言切换器(右上角悬浮)
 * ============================================================ */
.lang-switch--global{
    position: fixed; top:round(down, calc(12 * var(--px)), 1px); right:round(down, calc(12 * var(--px)), 1px); z-index: 1000;
}
.lang-switch--global > summary{
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap:round(down, calc(4 * var(--px)), 1px);
    padding:round(down, calc(6 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); border-radius: round(down, calc(999 * var(--px)), 1px);
    background: rgba(255,255,255,.92); box-shadow:0 round(down, calc(4 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) rgba(0,0,0,.08);
    font-size: round(down, calc(12 * var(--px)), 1px); color: #333;
}
.lang-switch--global > summary::-webkit-details-marker{ display: none; }
.lang-switch--global > summary img{ width:3.7333%; height:round(down, calc(14 * var(--px)), 1px); }
.lang-switch--global .lang-switch__cur{ font-weight: 600; }
.lang-switch--global .lang-options{
    position: absolute; top: 110%; right: 0;
    background: #fff; border-radius:round(down, calc(8 * var(--px)), 1px); padding:round(down, calc(6 * var(--px)), 1px) 0;
    box-shadow:0 round(down, calc(8 * var(--px)), 1px) round(down, calc(20 * var(--px)), 1px) rgba(0,0,0,.12);
    min-width:32%;
}
.lang-switch--global .lang-options a{
    display: block; padding:round(down, calc(8 * var(--px)), 1px) round(down, calc(16 * var(--px)), 1px);
    font-size: round(down, calc(13 * var(--px)), 1px); color: #333; text-decoration: none; white-space: nowrap;
}
.lang-switch--global .lang-options a[aria-current="true"]{ color: #fc6290; font-weight: 600; }
.lang-switch--global .lang-options a:hover{ background: #f7f7f9; }

/* ==========================================================================
   标题栏（原站 uni-page-head）—— 全站件，放这里因为**每个页面都加载 app.css**。
   放 index.css 会漏掉详情页和聊天页（它们不加载 index.css，实测标题栏样式全丢：
   高度 44→40、padding 归零、字重 700→400）。
   组件见 components/BgPageHead.vue。

   实测（localhost:8080 @375，所有页面一致）：
     375x44、padding 7px 3px、标题 16px/700、都有返回按钮（autoBackButton）
   两种配色：
     --purple  #afa7ef 白字 ┈ 首页 / 搜索结果 / 商圈（标题取 index.title）
     --light   #fff    黑字 ┈ 详情页 / 各子页 / 聊天（标题取接口 page_name）
   ========================================================================== */
.page-head {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--page-max); height: round(down, calc(44 * var(--px)), 1px);
  padding: round(down, calc(7 * var(--px)), 1px) round(down, calc(3 * var(--px)), 1px); box-sizing: border-box; z-index: 998;
}
.page-head--purple { background: #afa7ef; }
.page-head--purple .page-head__title,
.page-head--purple .page-head-btn { color: #fff; }
.page-head--light { background: #fff; }
.page-head--light .page-head__title,
.page-head--light .page-head-btn { color: #000; }
.page-head__title {
  height: round(down, calc(30 * var(--px)), 1px); line-height: round(down, calc(30 * var(--px)), 1px); text-align: center;
  font-size: round(down, calc(16 * var(--px)), 1px); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 返回按钮：实测 27x32、字号 27px、margin 0 2px */
.page-head-hd {
  position: absolute; left: round(down, calc(3 * var(--px)), 1px); top: round(down, calc(7 * var(--px)), 1px); height: round(down, calc(30 * var(--px)), 1px);
  display: flex; align-items: center;
}
.page-head-btn {
  width: round(down, calc(27 * var(--px)), 1px); height: round(down, calc(32 * var(--px)), 1px); margin: 0 round(down, calc(2 * var(--px)), 1px);
  display: flex; align-items: center; justify-content: center;
  font-size: round(down, calc(27 * var(--px)), 1px); line-height: 1; text-decoration: none;
}
.page-head-ph { height: round(down, calc(44 * var(--px)), 1px); }


/* ==========================================================================
   悬浮件（AI 测肤吉祥物 / 客服 / 二维码）—— 全站件。
   ⚠ 放这里因为**每个页面都加载 app.css**。放 index.css 会漏掉详情页和聊天页
     （它们不加载 index.css），实测 .kf-code 从 45x45 变成 375x72。
     和标题栏是同一个坑。
   ========================================================================== */
/* ---------- ⑧ 悬浮件（AI 测肤吉祥物 / 客服 / 二维码） ---------- */
.ai-mascot {
  position: fixed; right: round(down, calc(4 * var(--px)), 1px); top: 50%; transform: translateY(-50%); z-index: 999;
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
}
.ai-mascot__inner {
  position: relative; display: flex; flex-direction: column; align-items: center;
  animation: aiMascotBob 3.4s ease-in-out infinite;
}
.ai-mascot__img { width: round(down, calc(52 * var(--px)), 1px); height: auto; display: block; filter: drop-shadow(0 round(down, calc(6 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px) rgba(70, 50, 130, .35)); }
.ai-mascot__shadow {
  width: round(down, calc(30 * var(--px)), 1px); height: round(down, calc(4 * var(--px)), 1px); margin-top: -2px; border-radius: 50%;
  background: rgba(70, 50, 120, .28); filter: blur(1px);
  animation: aiMascotShadow 3.4s ease-in-out infinite;
}
.ai-mascot__tag {
  position: absolute; top: round(down, calc(2 * var(--px)), 1px); left: -4px; white-space: nowrap;
  background: #ff6f98; color: #fff; font-size: round(down, calc(10 * var(--px)), 1px); font-weight: 800; letter-spacing: .5px;
  padding: round(down, calc(3 * var(--px)), 1px) round(down, calc(8 * var(--px)), 1px); border-radius: round(down, calc(11 * var(--px)), 1px) round(down, calc(11 * var(--px)), 1px) round(down, calc(11 * var(--px)), 1px) round(down, calc(3 * var(--px)), 1px);
  box-shadow: 0 round(down, calc(2 * var(--px)), 1px) round(down, calc(4 * var(--px)), 1px) rgba(210, 70, 120, .4); z-index: 2;
  animation: aiMascotTag 1.8s ease-in-out infinite;
}
.ai-mascot__label {
  margin-top: round(down, calc(5 * var(--px)), 1px); white-space: nowrap; background: #fff; color: #6b4ea8;
  font-size: round(down, calc(11 * var(--px)), 1px); font-weight: 800; letter-spacing: .25px;
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(12 * var(--px)), 1px); border-radius: round(down, calc(12 * var(--px)), 1px);
  box-shadow: 0 round(down, calc(3 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px) -2px rgba(80, 55, 140, .32);
}
.kf-code, .qr-code {
  position: fixed; right: round(down, calc(5 * var(--px)), 1px); width: round(down, calc(45 * var(--px)), 1px); height: round(down, calc(45 * var(--px)), 1px);
}
.kf-code { bottom: round(down, calc(150 * var(--px)), 1px); z-index: 9998; }
.qr-code { bottom: round(down, calc(120 * var(--px)), 1px); z-index: 9999; animation: qr-shake 1s infinite; }
.kf-code img, .qr-code img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* 三个吉祥物动画照抄原站 components/aiSkinTab —— 漏了它们会在比对里表现为
   .ai-mascot__tag / __shadow 尺寸差几个像素（其实是动画相位不同）。 */
@keyframes aiMascotBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes aiMascotShadow {
  0%, 100% { transform: scaleX(1); opacity: .28; }
  50%      { transform: scaleX(.78); opacity: .18; }
}
@keyframes aiMascotTag {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.08) rotate(-3deg); }
}

@keyframes qr-shake {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-3deg); }
  30%  { transform: rotate(3deg); }
  60%  { transform: rotate(-3deg); }
  80%  { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

/* ==========================================================================
   toggleLang「翻译」按钮 —— 原站 components/toggleLang，评论、案例、详情页都在用。
   实测 41x28：14px / line-height 20px / padding 4px 6px / 粉字 rgb(253,131,171)。
   ⚠ 之前只在 hospital-detail.css 里按 .feedback-row 作用域定义过，
     评价列表、案例列表、案例详情这三页拿不到，按钮掉回浏览器默认样式
     （padding 1px 6px），宽度也从 41 撑成整行。所以提到这里做全局定义。
   ========================================================================== */
.language-change { flex-shrink: 0; }
.lang-selector { display: flex; width: -moz-fit-content; width: fit-content; }
.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;
  white-space: nowrap; font-family: inherit;
}

/* ==========================================================================
   字体族补齐 —— 全部由 scripts/fontmap.mjs 生成，值和老站的 SCSS 逐字一致

   ⚠ 为什么要单独一段：老站的字体声明是**逐元素**写在各页 scoped SCSS 里的
     （`PingFang SC-Semibold`、`Microsoft YaHei-Light` 这类），而且**首页
     一处都没有**（首页所有文字都落浏览器默认）。所以不能在 body 上统一设
     一个字体栈 —— 那样首页就错了（实测 76 处配对 76 处全错）。
     只能按老站的实际声明，一个元素一个元素补。

   ⚠ `PingFang SC-Semibold` / `Microsoft YaHei-Light` 这些**不是真实存在的
     字族名**，浏览器会跳到列表里的下一个（PingFang SC / Microsoft YaHei）。
     照抄就对了 —— 目标是和老站渲染出一样的结果，不是写「正确」的 CSS。

   验证：node scripts/fontdiff.mjs
   ========================================================================== */

/* ── 通用：底部按钮条（医院/医生/项目详情共用） ── */
.btns > .btns-detail > .btns-right,
.btns-detail > .btns-right > .orderpoint { font-family: "Microsoft YaHei-Regular", "Microsoft YaHei"; }
.btns-detail > .btns-img > span { font-family: "Microsoft YaHei-Light", "Microsoft YaHei"; }

/* ── 通用：轮播页码角标 ── */
.body > .swiper-body > .current { font-family: "Microsoft YaHei-Regular", "Microsoft YaHei"; }

/* ── 通用：机构卡（医生详情 / 项目详情共用 .mechanism） ── */
.body > .mechanism > .mechanism-title { font-family: PingFangSC-Regular-, PingFangSC-Regular; }
.mechanism-detail-left > .mechanism-detail-top > span,
.mechanism-detail-left > .mechanism-detail-top > .clinic-fee { font-family: "PingFang SC-Semibold", "PingFang SC"; }
.mechanism-detail > .mechanism-detail-left > .mechanism-detail-down,
.mechanism-detail > .mechanism-detail-left > .mechanism-detail-resp,
.mechanism-detail-left > .mechanism-detail-resp > span { font-family: "PingFang SC-Light", "PingFang SC"; }

/* ── 医院详情：地址 / 面诊费 / 营业时间 / 响应时长 ──
   ⚠ 同一个 .title 里三种字重：地址 Light、面诊费 Bold、营业时间 Regular。
     顺序不能调 —— 后面的更具体，靠覆盖生效。 */
.body > .title > div { font-family: "PingFang SC-Light", "PingFang SC"; }
.title > div > span { font-family: "PingFang SC-Light", "PingFang SC"; }
.body > .title > .clinic-fee-row,
.title > .clinic-fee-row > span { font-family: "PingFang SC-Bold", "PingFang SC"; }
.title > .title-time > .title-time-left,
.title-time > .title-time-list > div { font-family: "PingFang SC-Regular", "PingFang SC"; }

/* ── 医生详情：个人资料区 ── */
.user > .username > .username-left { font-family: "Microsoft YaHei-Bold", "Microsoft YaHei"; }
.username > .username-left > span,
.user > .user-list > .user-list-detail { font-family: "Microsoft YaHei-Regular", "Microsoft YaHei"; }
.user-box > .user-box-detail > div,
.user-box > .user-box-detail > span { font-family: "PingFang SC-Regular", "PingFang SC"; }
div > .head > .head-left { font-family: "PingFang SC-Medium", "PingFang SC"; }
.project-detail > a > .two-ellipsis { font-family: PingFangSC-Regular-, PingFangSC-Regular; }

/* ── 项目详情：标题 / 价格 / 医生卡 ── */
.project-price-box > .price-title > .title,
.user-right > .user-top > span { font-family: "PingFang SC-Medium", "PingFang SC"; }
.bottom-box > .price-top > span,
.price-title > .bottom-box > span { font-family: "PingFang SC-Regular", "PingFang SC"; }
.user-right > .user-down > span { font-family: PingFangSC-Regular-, PingFangSC-Regular; }

/* ── 搜索入口页 ── */
.body > .detaile > .title { font-family: "PingFang SC-Medium", "PingFang SC"; }
.detaile > .list > a { font-family: "Microsoft YaHei-Regular", "Microsoft YaHei"; }

/* ── 价格明细页 ── */
.PriceListItem-box > .PriceListItem-box-item > .PriceListItem-box-item-name { font-family: "PingFang SC-Semibold", "PingFang SC"; }
.bottomNav > .bottomNav-item > .bottomNav-item-right,
.bottomNav-item > .bottomNav-item-right > .orderpoint,
.bottomNav > .bottomNav-item > .bottomNav-item-left { font-family: "PingFang SC-Regular", "PingFang SC"; }

/* ==========================================================================
   容器宽度的三档断点 —— 照抄老站 App.vue:1685 / 1698 / 1722
   ⚠ 我原来只有一个「max-width: 640」，老站是三档：
       ≤767      占满屏幕（不居中、不限宽）
       768~1024  600px 居中          ← 这一档我完全没有
       ≥1025     640px 居中
     实测老站 tabbar 宽度：700→700、900→600、960→600、1024→600、1440→640。
   ========================================================================== */
@media screen and (max-width: 767px) {
    body,
    .page-main,
    .btns,
    .tabbar,
    .page-head,
    .bottomNav {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body,
    .page-main,
    .btns,
    .tabbar,
    .page-head,
    .bottomNav {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   桌面端（≥1025px）—— 逐条照抄老站 App.vue 的 PC 样式块

   ⚠ 这一整块我原来一条都没有，是全站桌面端最大的视觉差异来源：
     老站在 ≥1025px 上用一条 `* { font-size: 16px !important }` **把所有文字
     拍平成 16px**，再按几档把标题挑回去。我这边字号一直按 375 设计稿走，
     所以桌面上 tabbar 文字老站 16px、我 11px —— 用户在 page-main 640 的
     桌面窗口下一眼就看出来。

   ⚠ 断点是 1025，和 rpx 的缩放断点 960 是**两码事**，别混：
       ≤960   尺寸按视口等比缩放（--px）
       961~1024  尺寸退回 375 的值，字号仍是 375 的值
       ≥1025  容器锁 640，且所有字号被拍平成 16px（这一块）

   ⚠ `!important` 不能去掉 —— 老站原文就是 !important，去掉压不过
     各页自己的字号声明。

   来源：beauts_go_xcx_yxy/App.vue:1722 与 :2045 两个 @media 块。
   ========================================================================== */
@media screen and (min-width: 1025px) {
    body,
    .page-main,
    .btns,
    .tabbar,
    .page-head,
    .bottomNav {
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 覆盖所有字体：最小 16px */
    * { font-size: 16px !important; }

    /* 更大标题（老站按 rpx 档位挑回去，这里按对应的 375 px 值列） */
    h1,
    [style*="48rpx"], [style*="50rpx"], [style*="56rpx"], [style*="60rpx"], [style*="64rpx"] {
        font-size: 24px !important;
    }

    /* 中标题 */
    h2, h3,
    [style*="36rpx"], [style*="38rpx"], [style*="40rpx"], [style*="44rpx"], [style*="45rpx"] {
        font-size: 19px !important;
    }

    /* 次级文字 */
    [style*="32rpx"], [style*="30rpx"], [style*="34rpx"] { font-size: 17px !important; }
    [style*="28rpx"], [style*="26rpx"], [style*="29rpx"] { font-size: 16px !important; }

    /* 小文字 */
    [style*="22rpx"], [style*="20rpx"] { font-size: 16px !important; }

    /* 极小文字 */
    [style*="18rpx"], [style*="10rpx"] { font-size: 12px !important; }
}