/* =====================================================================
   移动端精修（H5 自适配）
   =====================================================================
   【背景】站长指示：「现在已经没人看网站了，所以 H5 页面一定要帮我自适配好，
           或者直接帮我做成小程序样式，方便手机阅览。这才是生存的方式。」

   【为什么加这一层】用无头浏览器在 **iPhone 12 视口（390×844，触屏）**
   实测 7 个主要页面后发现：
     · 横向溢出 **0 / 7 页** → 基础响应式是好的，不用推翻重做；
     · 但「点击目标过小」最多 **93 个**（汉堡按钮仅 38×34px，
       城市选择 81×38px，登录按钮 52×34px）→ 手指点不准；
     · 正文基础字号只有 **14.5px** → 手机上偏小，需要眯眼看。
   这两个是**可量化**的移动端体验缺陷，因此针对性修正，
   而不是把整站 CSS 推倒重来（那样风险远大于收益）。

   【规范依据】
     · 可点击元素最小尺寸 **44×44px**（Apple HIG / WCAG 2.5.5 建议 44px）
     · 移动端正文建议 **≥16px**（iOS 输入框小于 16px 还会触发自动放大）
     · 触屏要有 **:active 反馈**，否则用户不知道点到了没

   【放置位置】本段追加在 site.css **末尾**，靠后的同级选择器会覆盖前面的
   基础值，因此不必改动原有规则，风险最低。
   ===================================================================== */

/* =====================================================================
   0. 头部压缩（**实测发现的最大移动端问题**）
   =====================================================================
   【实测数据】（390×844 视口，用 DOM.getBoxModel 测量）
     · 头部整体 374×268px → **占首屏 31.8%**，把内容挤到只剩 2/3
     · Logo 图片 240×199px → **占首屏 23.6%**（徽章图在手机上变成巨图）
     · 桌面导航 374×42px → **在手机上仍然占位**，没有折叠

   【根因】
     · Logo 只有桌面尺寸，**没有任何移动端约束**，宽高比又接近方形，
       于是按宽度撑满后高度也到 199px；
     · 导航的折叠规则写在 site.css 的 `max-width: 768px` 里，
       而这里的移动端规则用的是 `900px` —— **两套断点不一致**，
       导致 768~900px 区间的窄屏上导航既没折叠、样式也没跟进。

   【修正原则】手机首屏是最宝贵的资源：头部必须压到 15% 以内，
   把 Logo 缩到"认得出来"的尺寸即可（品牌识别靠文字与配色，不靠巨图）。
   注意断点统一到 **900px**，与本站其他移动端规则保持一致。
   ===================================================================== */
@media (max-width: 900px) {
  /* Logo 图片：限死高度，宽度按比例，不再撑满 */
  .pm-logo__img {
    height: 40px !important;
    width: auto !important;
    max-height: 40px !important;
    object-fit: contain;
  }
  .pm-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
  }
  .pm-logo__text {
    font-size: 17px;
    font-weight: 700;
  }
  /* 头部整体：压缩内边距 */
  .pm-header__inner {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .pm-header {
    position: relative;
  }
  /* 汉堡按钮：做成真正的 44×44 可点区（之前只有文字行高 17px） */
  .pm-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    margin-left: auto;
    border: 1px solid var(--line, #e6e8ee);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
  }
  /* 桌面导航在小屏一律折叠（交给汉堡菜单），避免挤占首屏 */
  .pm-nav {
    display: none !important;
  }
  .pm-nav.is-open {
    display: flex !important;
    flex-direction: column;
    flex-basis: 100%;
    order: 3;
    gap: 0;
    padding: 6px 0;
    border-top: 1px solid var(--line, #e6e8ee);
  }
  .pm-nav.is-open a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
  }
  /* 头部操作区按钮：做成够大的可点区 */
  .pm-city-picker__btn,
  .pm-header__actions .pm-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* ---------- 1. 触屏点击目标：补足到 44px ---------- */
@media (max-width: 900px) {
  /* 汉堡菜单、城市选择、登录等头部按钮 */
  .pm-nav-toggle,
  .pm-city-picker__btn,
  .pm-header__actions a,
  .pm-header__actions button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 通用小按钮（列表页的"更多""筛选"等） */
  .pm-btn,
  .pm-btn--sm,
  .pm-btn--ghost {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* 分页、标签、面包屑里的链接也放大可点区域 */
  .pm-pagination a,
  .pm-pagination span,
  .pm-tag,
  .pm-breadcrumb a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* 导航展开后的菜单项：占满宽度、行高足够 */
  .pm-nav a,
  .pm-nav__list a,
  .pm-mobile-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
  }
  /* 侧边悬浮工具（回到顶部 / QQ客服）：拇指可达区 */
  .pm-sidebar__btn {
    width: 46px;
    height: 46px;
  }
}

/* ---------- 2. 正文可读性：字号与行高 ---------- */
@media (max-width: 900px) {
  /*
   * 正文提升到 16px。
   * 【为什么是 16px】iOS Safari 对 font-size < 16px 的输入框会
   * **自动放大页面**，导致布局跳动；正文同步提到 16px 也能减少阅读疲劳。
   */
  .pm-article__body,
  .pm-article__body p,
  .pm-detail-text,
  .pm-wiki-detail,
  .pm-wiki-detail p,
  .pm-faq-answer {
    font-size: 16px;
    line-height: 1.85;
  }
  /* 次级文字（说明/日期/标签）不低于 14px */
  .pm-small,
  .pm-muted,
  .pm-provider-card__addr,
  .pm-item-card__desc {
    font-size: 14px;
    line-height: 1.7;
  }
  /* 行宽控制：手机上段落不要顶满，留出呼吸 */
  .pm-article__body p,
  .pm-wiki-detail p {
    margin-bottom: 1.1em;
  }
  /* 表格在窄屏可横向滚动，避免撑破布局 */
  .pm-table-wrap,
  .pm-admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 3. 触屏反馈（没有反馈用户会以为没点到） ---------- */
@media (hover: none) and (pointer: coarse) {
  .pm-btn:active,
  .pm-nav-toggle:active,
  .pm-city-picker__btn:active,
  .pm-share__btn:active,
  .pm-sidebar__btn:active,
  .pm-map-link:active,
  a.pm-provider-card:active {
    opacity: .72;
    transform: scale(.98);
  }
  /* 触屏设备上取消 hover 引起的样式跳动 */
  .pm-provider-card:hover,
  .pm-item-card:hover {
    transform: none;
  }
}

/* ---------- 4. 底部留白：避免被浮动组件/浏览器工具栏遮住 ---------- */
@media (max-width: 900px) {
  body {
    /* env() 适配 iPhone 刘海屏底部安全区 */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .pm-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* 分享区在手机上更容易点 */
  .pm-share__list {
    gap: 8px;
  }
  .pm-share__btn {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* ---------- 5. 横竖屏自适应 ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  /* 横屏时首屏高度更矮，适当收紧区块间距 */
  .pm-section {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* ---------- 6. 移动端隐藏"桌面专属"装饰，减少干扰 ---------- */
@media (max-width: 600px) {
  /* 过宽的装饰性元素在小屏上容易造成溢出或拥挤 */
  .pm-hero__deco,
  .pm-aside-sticky-deco {
    display: none;
  }
  /* 卡片内边距收紧，让内容占比更大 */
  .pm-provider-card,
  .pm-item-card,
  .pm-side-card {
    padding: 14px;
  }
  /* 一级标题在手机上不要过大 */
  .pm-page-title {
    font-size: 21px;
    line-height: 1.4;
  }
  .pm-section__title {
    font-size: 18px;
  }
}

/* =====================================================================
   手机端底部 Tab 栏 + 更多抽屉（APP / 小程序 样式）
   =====================================================================
   【设计依据】底部 Tab 是 iOS / Android / 微信小程序**共同的导航惯例**：
     · 拇指最容易触达屏幕下方，顶部反而最难
     · 用户对"底部固定 4~5 个入口"有肌肉记忆，学习成本为零
     · 观感上立刻像"APP"而不是"网页"——这是站长明确要的效果

   【信息架构】主次分离，呼应站长要求
     · 底部 Tab（5 个）：首页 / 科普 / 百科 / 服务商 / 灵堂  → 引流主力
     · 「更多」抽屉：宠业资讯 / 问答 / 治愈星球 / 工具资料 /
                     按城市查询 / 关于我们  → 次要但不丢

   【只在手机端显示】桌面端隐藏本栏，继续用顶部导航（互不干扰）。
   ===================================================================== */
.pm-tabbar { display: none; }

@media (max-width: 900px) {
  /* ---- 底部 Tab 栏 ---- */
  .pm-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line, #e6e8ee);
    /* iPhone 刘海屏底部安全区 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
  }
  .pm-tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* 44px 是最小可点高度，这里给到 52px 更好按 */
    min-height: 52px;
    padding: 6px 2px 4px;
    border: 0;
    background: transparent;
    color: #7b8794;
    font-size: 11px;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pm-tabbar__icon { display: block; width: 23px; height: 23px; }
  .pm-tabbar__icon svg { width: 100%; height: 100%; display: block; }
  .pm-tabbar__text { font-size: 11px; white-space: nowrap; }
  /* 当前页高亮：颜色 + 轻微加粗，不用背景色以免显得沉重 */
  .pm-tabbar__item.is-active { color: var(--brand, #2f7d5d); font-weight: 600; }
  .pm-tabbar__item:active { opacity: .65; }

  /* 内容底部留白：避免最后一段被 Tab 栏盖住 */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* 移动端不再需要顶部汉堡（导航已下沉到 Tab 栏 + 抽屉） */
  .pm-nav-toggle { display: none !important; }

  /* ---- 「更多」抽屉 ---- */
  .pm-drawer { position: fixed; inset: 0; z-index: 80; }
  .pm-drawer[hidden] { display: none; }
  .pm-drawer__mask {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .42);
    animation: pm-fade-in .18s ease;
  }
  .pm-drawer__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 76vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: pm-slide-up .22s cubic-bezier(.22, .61, .36, 1);
  }
  .pm-drawer__handle {
    width: 38px; height: 4px; border-radius: 999px;
    background: #d8dde5; margin: 6px auto 10px;
  }
  .pm-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px; border-bottom: 1px solid var(--line, #e6e8ee);
  }
  .pm-drawer__head strong { font-size: 15px; color: #253044; }
  .pm-drawer__close {
    width: 36px; height: 36px; border: 0; background: #f2f4f8;
    border-radius: 50%; font-size: 15px; color: #6b7280; cursor: pointer;
  }
  .pm-drawer__list { list-style: none; margin: 10px 0 0; padding: 0; }
  .pm-drawer__list li + li { border-top: 1px solid #f1f3f7; }
  .pm-drawer__list a {
    display: flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 10px 4px;
    color: #253044; text-decoration: none;
  }
  .pm-drawer__label { font-size: 15px; font-weight: 500; flex: 0 0 auto; }
  .pm-drawer__desc { flex: 1 1 auto; font-size: 12px; color: #98a2b3; text-align: right; }
  .pm-drawer__arrow { color: #c4cbd6; font-size: 18px; line-height: 1; }
  .pm-drawer__foot {
    margin: 12px 0 0; padding-top: 10px;
    border-top: 1px solid #f1f3f7;
    font-size: 11px; color: #98a2b3; line-height: 1.6;
  }
}
@keyframes pm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-slide-up { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
/* 尊重"减少动效"偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .pm-drawer__mask, .pm-drawer__panel { animation: none; }
}

/* =====================================================================
   底部 Tab 栏带来的遮挡修正（实测发现，记录原因）
   =====================================================================
   【现象】加上底部 Tab 栏后截图发现两处遮挡：
     ① 右下「客服」悬浮按钮压住了内容卡片的最后一行
     ② 列表最后一项被 Tab 栏盖住
   【根因】
     · 侧边悬浮工具（客服/回到顶部）原本按 `bottom: 24px` 定位，
       没考虑底部多出了一条 52px + 安全区 的 Tab 栏；
     · body 的底部留白虽已加，但只覆盖了普通内容流，
       固定定位的悬浮层不在流内，需要**单独上移**。
   【修正】把悬浮工具整体抬到 Tab 栏之上，并加大 body 底部留白余量。
   ===================================================================== */
@media (max-width: 900px) {
  /* 悬浮工具（回到顶部 / 客服）抬到 Tab 栏上方 */
  .pm-sidebar-tools,
  .pm-sidebar {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .pm-sidebar__btn {
    width: 44px;
    height: 44px;
  }
  /* 内容底部留白：Tab 栏 52px + 悬浮层与卡片间距，给足避免"永远露不出最后一行" */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  /* 页脚在 Tab 栏之上，避免遮住版权信息 */
  .pm-footer { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* 抽屉内的工具入口（客服 / 回到顶部） */
@media (max-width: 900px) {
  .pm-drawer__utils {
    display: flex; gap: 10px; margin-top: 14px;
  }
  .pm-drawer__util {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    min-height: 46px; border-radius: 10px;
    border: 1px solid var(--line, #e6e8ee); background: #fafbfd;
    color: #33415c; font-size: 14px; text-decoration: none; cursor: pointer;
  }
  .pm-drawer__util:active { opacity: .7; }
  /*
   * 手机端隐藏右侧悬浮工具：
   *   实测「客服」按钮压住了「活跃度赛季榜」卡片的最后一行，
   *   而且底部已有 Tab 栏，再放一列悬浮按钮既遮挡内容又显得冗余。
   *   功能已收进「更多」抽屉，不丢失可达性。
   */
  .pm-sidebar { display: none !important; }
}

/* =====================================================================
   手机端首页九宫格（APP 样式功能入口）
   =====================================================================
   【设计依据：微信小程序设计指南（官方）】
     · 基础宽度 390px 响应式；可点区域物理尺寸 7~9mm（≥44px）
     · 常用字号 22 / 17 / 15 / 14 / 12
     · 核心原则「重点突出」——避免无关干扰元素。
       所以九宫格只放功能入口、**不放文章流**：密度低、目标大、好点。
   【布局】3 列 × 3 行（站长设计稿），图标 48px 圆角方块 + 底色衬托文字。
          用 3 列而非 4 列：3 列每格约 110px 宽，点击区域远大于 44px 的最小值，
          文字也能完整显示不被截断（站长要求"图标做好背景色衬托文字"）。
   ===================================================================== */
.pm-grid9 { display: none; }

@media (max-width: 900px) {
  .pm-grid9 {
    display: block;
    background: #fff;
    border-radius: 14px;
    margin: 10px 12px 0;
    padding: 14px 10px 6px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  }
  .pm-grid9__head { padding: 0 6px 10px; }
  .pm-grid9__title { margin: 0; font-size: 17px; font-weight: 700; color: #253044; letter-spacing: .2px; }
  .pm-grid9__sub { margin: 3px 0 0; font-size: 12px; color: #98a2b3; }
  .pm-grid9__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px 0;
  }
  .pm-grid9__cell { margin: 0; }
  .pm-grid9__link {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    /* 每格 ≥ 88px 高，远超 44px 最小可点尺寸，手指好按 */
    padding: 12px 4px 14px;
    border-radius: 12px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pm-grid9__link:active { background: #f5f7fb; }
  .pm-grid9__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  .pm-grid9__icon svg { width: 25px; height: 25px; display: block; }
  .pm-grid9__text {
    font-size: 13px; color: #33415c; line-height: 1.2;
    text-align: center; white-space: nowrap;
  }
  /* 底部 Tab 收敛为 4 项（官方建议不超过 4 项），样式沿用原有 */
}
/* 超窄屏（≤360px）：字号略收，避免"商家黄页"这类四字标签换行 */
@media (max-width: 360px) {
  .pm-grid9__text { font-size: 12px; }
  .pm-grid9__icon { width: 44px; height: 44px; border-radius: 12px; }
  .pm-grid9__icon svg { width: 23px; height: 23px; }
}

/* 手机端隐藏指定区块（用于去重：九宫格已包含这些入口） */
.pm-hide-mobile { display: block; }
@media (max-width: 900px) {
  .pm-hide-mobile { display: none !important; }
  /* 桌面专属区块在手机端隐藏 */
  .pm-hide-desktop { display: none !important; }
}

/* =====================================================================
   手机端紧凑首屏（替代桌面 Hero，解决"九宫格不在首屏"）
   =====================================================================
   【实测问题】手机端 .pm-hero 约 500px + 数据区约 260px + 活跃榜约 450px，
   把九宫格挤到 2250px 处，而视口只有 844px —— **首屏看不到任何图标**。
   与站长设计稿（顶部宣传区 → 九宫格 → 底部广告）完全不符。
   【做法】手机端用紧凑品牌条替代 Hero，九宫格紧随其后，
   数据压成一行、活跃榜折叠，保证**九宫格落在首屏内**。
   ===================================================================== */
.pm-mhome { display: none; }

@media (max-width: 900px) {
  .pm-mhome { display: block; }

  /* ---- 紧凑品牌条 ---- */
  .pm-mhome__brand {
    background: linear-gradient(135deg, #eef6ff 0%, #eaf7f1 100%);
    padding: 14px 16px 16px;
  }
  .pm-mhome__eyebrow {
    margin: 0 0 8px; font-size: 12.5px; color: #4a5b76;
    display: flex; align-items: center; gap: 6px;
  }
  .pm-mhome__eyebrow strong { color: var(--brand, #2f7d5d); font-size: 14px; }
  .pm-mhome__dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand, #2f7d5d); flex: 0 0 auto;
  }
  .pm-mhome__title {
    margin: 0 0 8px; font-size: 21px; line-height: 1.35; color: #1f2b41; font-weight: 800;
  }
  .pm-mhome__desc {
    margin: 0; font-size: 13.5px; line-height: 1.7; color: #5a6b85;
    /* 只显示 2 行，避免描述过长又占竖向空间 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---- 数据条：一行四格 ---- */
  .pm-mhome--below { background: transparent; }
  .pm-mhome__stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-radius: 14px; margin: 10px 12px 0; padding: 12px 6px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  }
  .pm-mhome__stats > div { text-align: center; }
  .pm-mhome__stats strong { display: block; font-size: 18px; color: #1f2b41; font-weight: 800; line-height: 1.2; }
  .pm-mhome__stats span { display: block; font-size: 11px; color: #98a2b3; margin-top: 2px; }

  /* ---- 活跃度榜：折叠 ---- */
  .pm-mhome__rank {
    background: #fff; border-radius: 14px; margin: 10px 12px 0; padding: 0 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  }
  .pm-mhome__rank > summary {
    list-style: none; cursor: pointer;
    min-height: 52px; display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #253044;
  }
  .pm-mhome__rank > summary::-webkit-details-marker { display: none; }
  .pm-mhome__rank-hint { margin-left: auto; font-size: 12px; font-weight: 400; color: #98a2b3; }
  .pm-mhome__rank[open] > summary { border-bottom: 1px solid #f1f3f7; }
  .pm-mhome__rank-more {
    display: block; padding: 12px 0 14px; text-align: center;
    font-size: 13px; color: var(--brand, #2f7d5d); text-decoration: none;
  }
}

/* 手机版首页广告位容器（仅手机端显示，见 views/index.ejs 说明） */
@media (max-width: 900px) {
  .pm-mhome--ad { margin: 10px 12px 0; }
  .pm-mhome--ad .pm-banner { border-radius: 14px; overflow: hidden; }
  .pm-mhome--ad .pm-banner__item img { border-radius: 14px; }
}

/* =====================================================================
   抽屉底部「合作与联系」区（站长要求：让合作方优先看到）
   =====================================================================
   放在抽屉最下方，滚动即可看到；只展示已配置的项，未配置不占位。
   备案号带官方查询链接，便于合作方核验主体真实性。
   ===================================================================== */
@media (max-width: 900px) {
  .pm-drawer__coop {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid #f1f3f7;
  }
  .pm-drawer__coop-title {
    margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #253044;
  }
  .pm-drawer__coop-list { list-style: none; margin: 0; padding: 0; }
  .pm-drawer__coop-list li {
    display: flex; align-items: baseline; gap: 10px;
    min-height: 34px; padding: 4px 0; font-size: 13.5px;
  }
  .pm-drawer__coop-k { flex: 0 0 62px; color: #98a2b3; font-size: 12.5px; }
  .pm-drawer__coop-v { flex: 1 1 auto; color: #33415c; word-break: break-all; text-decoration: none; }
  a.pm-drawer__coop-v { color: var(--brand, #2f7d5d); }
  /* 公众号二维码：居中展示 */
  .pm-drawer__coop-qr { margin: 10px 0 4px; text-align: center; }
  .pm-drawer__coop-qr img { border-radius: 10px; border: 1px solid #eef1f6; }
  .pm-drawer__coop-qr p { margin: 6px 0 0; font-size: 12px; color: #98a2b3; }
  /* 备案区：小字、灰色，不喧宾夺主但清晰可读 */
  .pm-drawer__coop-legal {
    list-style: none; margin: 10px 0 0; padding: 10px 0 0;
    border-top: 1px dashed #eef1f6;
  }
  .pm-drawer__coop-legal li { font-size: 12px; color: #98a2b3; line-height: 1.9; word-break: break-all; }
  .pm-drawer__coop-legal a { color: #98a2b3; text-decoration: none; }
  .pm-drawer__coop-legal a:active { color: var(--brand, #2f7d5d); }
}

/* =====================================================================
   手机端固定分享条（H5 裂变入口）
   =====================================================================
   位置：底部 Tab 栏**之上**（拇指可及区），滚动 320px 后淡入，
         避免一进页面就遮挡内容。
   平台能力说明见 views/partials/share-bar.ejs 头部注释。
   ===================================================================== */
.pm-sharebar { display: none; }

@media (max-width: 900px) {
  .pm-sharebar {
    display: flex;
    position: fixed; left: 0; right: 0;
    /* 抬到 Tab 栏之上：Tab 高 52 + 安全区 */
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line, #e6e8ee);
    transform: translateY(120%);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    pointer-events: none;
  }
  .pm-sharebar.is-show { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .pm-sharebar__btn {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 48px; padding: 4px 2px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 11px; color: #5a6b85; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pm-sharebar__btn:active { opacity: .6; }
  .pm-sharebar__ico { font-size: 16px; line-height: 1; }
  .pm-sharebar__btn--wide { flex: 1 1 auto; width: 100%; min-height: 46px; font-size: 14px; color: #33415c; }

  /* ---- 二维码 / 更多 浮层 ---- */
  .pm-sharebar-qr, .pm-sharebar-more { position: fixed; inset: 0; z-index: 90; }
  .pm-sharebar-qr[hidden], .pm-sharebar-more[hidden] { display: none; }
  .pm-sharebar-qr__mask {
    position: absolute; inset: 0; background: rgba(15, 23, 42, .48);
  }
  .pm-sharebar-qr__box {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(88vw, 340px);
    background: #fff; border-radius: 16px; padding: 20px 18px 16px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .26);
  }
  .pm-sharebar-qr__box h4 { margin: 0 0 6px; font-size: 16px; color: #253044; }
  .pm-sharebar-qr__tip { margin: 0 0 12px; font-size: 12px; color: #98a2b3; }
  .pm-sharebar-qr__box img { width: 200px; height: 200px; border-radius: 8px; border: 1px solid #eef1f6; }
  .pm-sharebar-qr__url {
    margin: 10px 0 12px; font-size: 11px; color: #98a2b3;
    word-break: break-all; line-height: 1.5;
  }
  /* 更多面板 */
  .pm-sharebar-more__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0;
  }
  .pm-sharebar-more__item {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px; border-radius: 10px; border: 1px solid var(--line, #e6e8ee);
    background: #fafbfd; color: #33415c; font-size: 13px;
    text-decoration: none; cursor: pointer;
  }
  .pm-sharebar-more__item:active { opacity: .7; }
  .pm-sharebar-more__note {
    margin: 6px 0 12px; font-size: 11px; color: #98a2b3; line-height: 1.6; text-align: left;
  }
  /* 轻提示 */
  .pm-sharebar-toast {
    position: fixed; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(8px);
    background: rgba(15, 23, 42, .9); color: #fff;
    padding: 9px 16px; border-radius: 999px; font-size: 13px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
    z-index: 95; max-width: 80vw; text-align: center;
  }
  .pm-sharebar-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 分享条滚动后的轻微投影（提示"这是悬浮层"；不再控制显隐） */
@media (max-width: 900px) {
  .pm-sharebar.is-lifted { box-shadow: 0 -3px 14px rgba(15, 23, 42, .08); }
}

/* =====================================================================
   底部留白修正（分享条加入后的实测问题）
   =====================================================================
   【现象】分享条常驻后截图发现：它**盖住了数据条**（"379 / 6312 / 0 / 0"）。
   【根因】此前 body 底部留白只按「底部 Tab 栏 52px + 安全区」计算，
          新增的分享条又占 49px，两者叠加约 101px，留白不足。
   【修正】留白改为覆盖 Tab 栏 + 分享条，并留一点间隙，
          保证页面最后一行内容不会被任何悬浮层遮住。
   ===================================================================== */
@media (max-width: 900px) {
  body { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
  /* 页脚底部同样要让开悬浮层 */
  .pm-footer { margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   页脚「合作与联系」常显条（手机端）
   =====================================================================
   【改进原因】站长反馈"没看到展示联系方式的地方"。
   复盘：联系方式原先只在「更多」抽屉里，且配置项多为空，
         既不显眼也没内容。这里在页脚加**常显**一条，
         不用点抽屉就能看到合作联系方式与备案信息。
   【原则】仍然"未配置就不占位"；桌面端页脚已有完整四栏，无需重复。
   ===================================================================== */
.pm-footer__contact { display: none; }
@media (max-width: 900px) {
  .pm-footer__contact {
    display: block;
    margin: 0 0 14px; padding: 14px 14px 12px;
    background: rgba(255, 255, 255, .06);
    border-radius: 12px;
  }
  .pm-footer__contact-title {
    margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #fff;
  }
  .pm-footer__contact-list { list-style: none; margin: 0; padding: 0; }
  .pm-footer__contact-list li {
    display: flex; align-items: baseline; gap: 10px;
    min-height: 32px; padding: 3px 0; font-size: 13.5px; color: #d7dde8;
  }
  .pm-footer__contact-list span { flex: 0 0 58px; color: #94a3b8; font-size: 12.5px; }
  .pm-footer__contact-list a { color: #7fd0a8; text-decoration: none; }
  .pm-footer__contact-list b { font-weight: 500; color: #eef2f7; word-break: break-all; }
  .pm-footer__contact-legal {
    margin: 10px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 11.5px; color: #94a3b8; line-height: 1.8; word-break: break-all;
  }
  .pm-footer__contact-legal a { color: #94a3b8; text-decoration: none; }
}

/* =====================================================================
   底部 Tab 的「更多」入口（简洁图标按钮）
   =====================================================================
   复盘：站长要求砍掉"两排都带更多"的重复 →
         被砍的是**吸底分享条**（已移除），而「更多」是打开
         「联系方式抽屉」的入口，功能上必须有。因此降级为纯图标按钮：
         只占 48px 宽度、不显示文字，不再与其它 Tab 抢注意力。
   ===================================================================== */
@media (max-width: 900px) {
  .pm-tabbar__more {
    flex: 0 0 48px; width: 48px;
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0;
    border: 0; background: transparent; cursor: pointer;
    color: #7b8794; -webkit-tap-highlight-color: transparent;
  }
  .pm-tabbar__more:active { opacity: .6; }
  /* 分享收进侧边后，底部不再需要为分享条留白，恢复只让开 Tab 栏 */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .pm-footer { margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* 侧边悬浮工具重新显示（手机端此前为了避让分享条被隐藏） */
  .pm-sidebar { display: flex !important; bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
}