/* ===========================================================================
   易起速递（mis.17transit.com）· 多端视觉皮肤  v1
   ---------------------------------------------------------------------------
   定位：纯视觉层。只改颜色 / 圆角 / 阴影 / 间距 / 字体栈 / 桌面端适配。
   铁律：不改接口、路由、数据结构与任何业务逻辑；不改动元素尺寸语义。
   用法：由 index.html 在所有样式之后引入；覆盖既有样式处用 !important。
   调色：取自站点自有品牌资产实测采样
         logo 深宝蓝 #0C0B69 · 导航海军蓝 #243762 · 功能蓝 #4064B6
         （功能蓝与站内图标 / tabbar 选中态 / tp-fc / tp-bc 完全一致）
   =========================================================================== */

:root {
  --yq-navy:      #0C0B69;   /* 品牌深宝蓝（logo 底） */
  --yq-navy-2:    #243762;   /* 导航海军蓝 */
  --yq-blue:      #4064B6;   /* 功能蓝：与站内既有主色一致 */
  --yq-blue-d:    #33529C;
  --yq-blue-l:    #EEF3FF;   /* 浅蓝底 */
  --yq-blue-line: #DCE6FF;   /* 浅蓝描边 */
  --yq-bg:        #F4F6FA;   /* 页面底 */
  --yq-line:      #EEF0F4;   /* 分隔线（原 #ededed 偏黄） */
  --yq-ink:       #1B2433;   /* 主文字 */
  --yq-ink-2:     #5A6474;   /* 次文字（原 #666） */
  --yq-ink-3:     #8A93A3;   /* 弱文字（原 #999） */
  --yq-red:       #FF4A37;   /* 价格红（沿用站内） */
  --yq-frame:     440px;     /* 桌面端限宽：应用内容实为 375 基准（见下方说明） */
}

/* ---------------------------------------------------------------------------
   1. 基础排版与底色
   --------------------------------------------------------------------------- */
html, body {
  background: var(--yq-bg);
}
/* 注意：主 CSS 中 #app 无高度规则，uni-app{height:100%} 本就解析为内容高（body 滚动）。
   这里刻意不给 #app / uni-app 加高度，避免改变既有滚动行为。 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--yq-ink);
}
uni-view, uni-text, uni-button, uni-input, uni-textarea, uni-label, uni-picker, uni-picker-view {
  font-family: inherit;
}
/* 页面底：手机白底观感偏灰旧，统一为冷调浅灰 */
uni-page-body { background-color: var(--yq-bg) !important; }
.tp-bc-page    { background-color: var(--yq-bg) !important; }
.tp-bcF5       { background-color: var(--yq-bg) !important; }

/* 文字层级：原 #666/#999 对比偏弱，拉出层次 */
.tp-fc333 { color: var(--yq-ink)   !important; }
.tp-fc666 { color: var(--yq-ink-2) !important; }
.tp-fc999 { color: var(--yq-ink-3) !important; }
.tp-fc000 { color: var(--yq-ink)   !important; }
.tp-red   { color: var(--yq-red)   !important; }

/* ---------------------------------------------------------------------------
   2. 圆角体系升级（原值 2~6px，明显偏"方"）
      rpx→px 按 375 基准折半：br4=2px br6=3px br8=4px br10=5px br12=6px br15=7.5px br20=10px
   --------------------------------------------------------------------------- */
.tp-br4   { border-radius: 8px  !important; }
.tp-br6   { border-radius: 9px  !important; }
.tp-br8   { border-radius: 12px !important; }
.tp-br10  { border-radius: 12px !important; }
.tp-br12  { border-radius: 14px !important; }
.tp-br15  { border-radius: 16px !important; }
.tp-br20  { border-radius: 16px !important; }
.tp-br40  { border-radius: 20px !important; }
.tp-br-t-lr12 { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; }
.tp-br-b-lr12 { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; }

/* ---------------------------------------------------------------------------
   3. 卡片：白底容器同时带圆角时，才加柔和投影（避免误伤通栏白条）
   --------------------------------------------------------------------------- */
.tp-bgf.tp-br4, .tp-bgf.tp-br6, .tp-bgf.tp-br8, .tp-bgf.tp-br10,
.tp-bgf.tp-br12, .tp-bgf.tp-br15, .tp-bgf.tp-br20 {
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.055) !important;
}
/* 站内既有两档阴影：统一为更轻更冷的扩散 */
.tp-bs14 {
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(16,24,40,.06) !important;
}
.tp-bs-tc {
  box-shadow: 0 1px 2px rgba(16,24,40,.035), 0 6px 16px rgba(16,24,40,.05) !important;
}
.tp-bs    { box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; }
.tp-bsf5  { box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; }

/* 分隔线：原 #ededed 偏黄，换冷灰；半像素细线保持质感 */
.tp-bdbm { border-bottom-color: var(--yq-line) !important; }
.tp-bdtp { border-top-color:    var(--yq-line) !important; }
.tp-border1 { border-color: #E3E7EF !important; }

/* ---------------------------------------------------------------------------
   4. 品类标签（结果页 / 详情页 chips）
      原样式：白底 + 1px 蓝描边 + 蓝字，视觉偏硬
      新样式：浅蓝底 + 极浅描边 + 蓝字，柔和现代
      首个标签 = 价格体系来源徽标（由前端补丁注入「新」/「旧」），做深色实心强调
   --------------------------------------------------------------------------- */
.tp-bdc-tc {
  background-color: var(--yq-blue-l) !important;
  border: 1px solid var(--yq-blue-line) !important;
  color: var(--yq-blue) !important;
  border-radius: 999px !important;
  font-weight: 500;
}
uni-view.level_align.flex_wrap.flex-1 > uni-view.tp-bdc-tc:first-child {
  background: linear-gradient(135deg, var(--yq-blue) 0%, var(--yq-navy-2) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   5. 主按钮：原为纯色 #4064b6，补渐变 + 投影 + 按压反馈
   --------------------------------------------------------------------------- */
.tp-btn-h88 {
  background: linear-gradient(135deg, var(--yq-blue) 0%, var(--yq-blue-d) 100%) !important;
  box-shadow: 0 4px 14px rgba(64,100,182,.28) !important;
  font-size: 32px !important;   /* 站内该规则漏写结尾 % 导致字号失效，此处修正 */
  letter-spacing: .5px;
}
.tp-btn-h88:active { filter: brightness(.94); }
.tp-bc { background-color: var(--yq-blue) !important; }

/* 通用按钮圆角（uni 默认偏方） */
uni-button, .uni-button { border-radius: 12px; }
uni-button[type=primary], .uni-button--primary {
  background: linear-gradient(135deg, var(--yq-blue) 0%, var(--yq-blue-d) 100%);
  border-color: transparent;
}

/* ---------------------------------------------------------------------------
   6. 顶部导航（ColorUI cu-custom，站点自有 navBg 世界地图底图 —— 保留品牌识别）
      仅补投影与标题字重，不替换品牌底图
   --------------------------------------------------------------------------- */
.cu-custom .cu-bar {
  box-shadow: 0 2px 12px rgba(12,11,105,.20) !important;
}
.cu-custom .cu-bar .content uni-text {
  font-weight: 600;
  letter-spacing: .5px;
}
.cu-custom .cu-bar .action:first-child uni-text,
.cu-custom .cu-bar .action uni-text[class*="cuIcon-back"] { font-weight: 500; }

/* ---------------------------------------------------------------------------
   7. 底部 tabbar：白底 + 冷调上边界 + 轻微上浮阴影
   --------------------------------------------------------------------------- */
uni-tabbar.uni-tabbar-bottom .uni-tabbar {
  background-color: #fff !important;
  box-shadow: 0 -1px 0 var(--yq-line), 0 -10px 28px rgba(16,24,40,.07) !important;
}
.uni-tabbar-border { background-color: var(--yq-line) !important; }

/* ---------------------------------------------------------------------------
   8. 弹层 / 提示：圆角与毛玻璃，替换旧的纯黑半透明
   --------------------------------------------------------------------------- */
uni-toast .uni-toast {
  border-radius: 12px !important;
  background: rgba(27,36,51,.88) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(16,24,40,.22);
}
.uni-modal, .uni-popup-dialog, .uni-actionsheet, .uni-picker-container .uni-picker-custom {
  border-radius: 16px;
}
.uni-modal { box-shadow: 0 24px 64px rgba(16,24,40,.24); }

/* 载入动画：主色化 */
uni-loading, .uni-loading { color: var(--yq-blue); }

/* ---------------------------------------------------------------------------
   9. 滚动条（桌面端更精致）
   --------------------------------------------------------------------------- */
uni-page-wrapper, uni-page-body, .uni-scroll-view, .uni-scroll-view-content { scrollbar-width: thin; }
html::-webkit-scrollbar, body::-webkit-scrollbar,
uni-page-wrapper::-webkit-scrollbar,
uni-page-body::-webkit-scrollbar,
.uni-scroll-view::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
uni-page-wrapper::-webkit-scrollbar-thumb,
uni-page-body::-webkit-scrollbar-thumb,
.uni-scroll-view::-webkit-scrollbar-thumb {
  background: rgba(64,100,182,.28); border-radius: 8px; border: 2px solid transparent;
  background-clip: content-box;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.uni-scroll-view::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================================
   10. ★ 桌面端 / 平板适配（核心修复）
   ---------------------------------------------------------------------------
   根因（已核对线上 uni-app 运行时 upx2px 源码）：
     h = (rpx值 === 750 || 视口宽 <= 960) ? 视口宽 : 375;   result = rpx / 750 * h
   即：视口宽 > 960 时，除"恰好 750rpx"外，所有 rpx 一律按 375 基准换算（0.5 倍），
   与 375px 手机完全同比例；而根容器 uni-app 仍是 width:100%，
   于是固定 0.5 倍的内容被铺进整屏宽度 —— 内容被横向拉散、留白巨大，即"电脑端不适配"。
   （站内"恰好 750rpx"仅 1 处，且是 ColorUI 演示组件 .tower-swiper 的 max-width，
     不会撑破容器，故可忽略该特例。）

   正解：桌面端把根容器限宽到手机级宽度（440px）并居中，
        内容比例与手机端 100% 一致，同时用品牌底色 + 卡片投影做成"作品感"版面。
        所有 position:fixed 的全宽层（导航 / tabbar / 下单栏 / 客服面板 / 拖拽区）
        一并限宽居中。
   =========================================================================== */
@media screen and (min-width: 768px) {
  html { overflow-x: hidden; }
  html, body {
    background: #E9EDF4;
    background-image:
      radial-gradient(1100px 560px at 50% -12%, #DFE8FB 0%, rgba(223,232,251,0) 62%),
      linear-gradient(180deg, #EEF2F8 0%, #E6EBF3 100%);
    background-attachment: fixed;
  }
  uni-app {
    max-width: var(--yq-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--yq-bg) !important;
    box-shadow: 0 0 0 1px rgba(16,24,40,.055),
                0 20px 56px rgba(16,24,40,.13) !important;
  }
  /* 固顶导航 / 固底 tabbar 同步限宽居中 */
  uni-page-head .uni-page-head,
  uni-tabbar.uni-tabbar-bottom .uni-tabbar,
  uni-tabbar.uni-tabbar-top .uni-tabbar {
    left: 0 !important;
    right: 0 !important;
    max-width: var(--yq-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 前端补丁注入的底部下单栏 / 客服面板 同步限宽 */
  #yq-order-bar {
    left: 0 !important; right: 0 !important;
    max-width: var(--yq-frame) !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  #yq-kefu-sheet > div {
    max-width: var(--yq-frame) !important;
    margin-left: auto !important; margin-right: auto !important;
    border-radius: 20px 20px 0 0 !important;
  }
  /* 转运仓页的可拖拽区用 100vw + fixed，会越出限宽容器，单独收进来 */
  uni-movable-area {
    left: 0 !important; right: 0 !important;
    max-width: var(--yq-frame) !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  /* 宽表 / 长文案在桌面端不至于过分拉伸 */
  .tp-tyc { max-width: 100%; }
}

/* 超窄屏（≤320px）兜底：避免横向溢出 */
@media screen and (max-width: 320px) {
  uni-app { min-width: 0 !important; overflow-x: hidden; }
}

/* ===========================================================================
   11. 固顶导航收进限宽容器（通用修复）
   ---------------------------------------------------------------------------
   ColorUI 的 .cu-bar.fixed 是 position:fixed; width:100%; top:0，且没写 left/right，
   于是它按"静态位置"落在 uni-app 左边缘、宽度却是 100vw —— 桌面端会横向越出限宽栏，
   同时 .cu-bar .content 的 width:calc(100% - 440rpx) 会算成 0，标题被挤没。
   这里用 left:50% + translateX(-50%) 把它压回限宽栏并居中，content 改用固定左右内缩。
   =========================================================================== */
@media screen and (min-width: 768px) {
  uni-view.cu-custom .cu-bar.fixed {
    left: 50% !important;
    right: auto !important;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100% !important;
    max-width: var(--yq-frame) !important;
  }
  uni-view.cu-custom .cu-bar.fixed .content {
    width: auto !important;
    left: 56px !important;
    right: 56px !important;
  }
}

/* ===========================================================================
   12. 「联系客服」页（#/pages/home/callKefu）
   ---------------------------------------------------------------------------
   内容与 https://www.17transit.com/contact.asp 保持一致；
   运行时数据源：/static/yq-contact.json（FTP 改完即生效，无需重新打包）。
   命名空间 .yq-kf-*，与站内既有样式零冲突。

   ⚠ 必须显式声明 font-size：uni-app H5 运行期把 body 的 font-size 设成 29px
     （rpx 基准 800 的一半不到），不覆盖会让整页文字放大近一倍、并触发折行。
   --------------------------------------------------------------------------- */
.yq-kf-wrap { padding: 0 !important; background-color: var(--yq-bg) !important; }

.yq-kf {
  font-size: 15px;
  line-height: 1.6;
  color: var(--yq-ink);
  -webkit-font-smoothing: antialiased;
}
.yq-kf-in { padding: 14px 14px 30px; }
.yq-kf, .yq-kf *, .yq-kf *::before, .yq-kf *::after { box-sizing: border-box; }
.yq-kf p, .yq-kf h3, .yq-kf ul, .yq-kf li { margin: 0; padding: 0; list-style: none; }
.yq-kf a { text-decoration: none; color: inherit; }
/* 注意：上面这条 `.yq-kf a`（0,1,1）会压过 `.yq-kf-btn`（0,1,0），
   必须用「标签+类」把按钮的配色抢回来，否则白底白字（hero 里的官网按钮会消失）。 */
.yq-kf a.yq-kf-btn      { color: #0b4a99; }
.yq-kf a.yq-kf-btn-ghost { color: #fff; }
.yq-kf a.yq-kf-btn-main { color: #fff; }
.yq-kf a.yq-kf-a        { color: var(--yq-blue); }
.yq-kf a.yq-kf-a2       { color: #fff; }

/* ---------- Hero：品牌 + 热线 + 两个动作 ---------- */
.yq-kf-hero {
  position: relative;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 14px;
  color: #fff;
  background-color: #0b4a99;
  background-image:
    radial-gradient(circle at 92% 6%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 2% 104%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(135deg, #0a3f85 0%, #1560bd 52%, #2b8ef0 100%);
  box-shadow: 0 12px 30px rgba(11, 74, 153, .26);
}
.yq-kf-brand { font-size: 21px; font-weight: 700; letter-spacing: .5px; }
.yq-kf-branden { font-size: 10.5px; letter-spacing: 1.7px; text-transform: uppercase; color: rgba(255,255,255,.70); margin-top: 3px; }
.yq-kf-slogan { font-size: 13px !important; color: rgba(255,255,255,.88) !important; margin-top: 9px !important; }
.yq-kf-meta { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,.92); }
.yq-kf-meta b { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.yq-kf-hact { display: flex; gap: 10px; margin-top: 16px; }
.yq-kf-btn {
  flex: 1 1 0; min-width: 0;
  display: block; text-align: center;
  padding: 11px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  color: #0b4a99; background: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 16px rgba(4, 32, 72, .22);
}
.yq-kf-btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.46); box-shadow: none; }
.yq-kf-btn:active { -webkit-filter: brightness(.95); filter: brightness(.95); }

/* ---------- 卡片 ---------- */
.yq-kf-grid { display: block; }
.yq-kf-card {
  background: #fff;
  border-radius: 16px;
  padding: 4px 16px 8px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.055);
}
.yq-kf-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--yq-ink);
  padding: 13px 0 11px;
  border-bottom: 1px solid var(--yq-line);
}
.yq-kf-h i { font-style: normal; font-size: 17px; line-height: 1; }
.yq-kf-h span {
  margin-left: auto; font-size: 11px; font-weight: 400; color: var(--yq-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%;
}

/* ---------- 字段行：三栏网格（图标 / 文案 / 动作），永不折行 ---------- */
.yq-kf-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--yq-line);
}
.yq-kf-body > .yq-kf-row:last-child { border-bottom: 0; }
.yq-kf-ic {
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  background: var(--yq-blue-l);
}
.yq-kf-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.yq-kf-lb {
  font-size: 12px; color: var(--yq-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yq-kf-note {
  font-style: normal; font-size: 10.5px; color: var(--yq-blue);
  background: var(--yq-blue-l); border: 1px solid var(--yq-blue-line);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.yq-kf-vl {
  font-size: 15.5px; font-weight: 600; color: var(--yq-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yq-kf-vl-mono { font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; letter-spacing: .2px; }
.yq-kf-ac { display: flex; gap: 7px; flex: none; align-items: center; }
.yq-kf-a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--yq-blue); background: var(--yq-blue-l); border: 1px solid var(--yq-blue-line);
}
.yq-kf-a2 { color: #fff; background: linear-gradient(135deg, var(--yq-blue) 0%, var(--yq-blue-d) 100%); border-color: transparent; }
.yq-kf-a:active { -webkit-filter: brightness(.94); filter: brightness(.94); }

/* 地址行：值允许折行，动作顶对齐 */
.yq-kf-row-adr { align-items: flex-start; }
.yq-kf-row-adr .yq-kf-ic { margin-top: 1px; }
.yq-kf-row-adr .yq-kf-vl { white-space: normal; word-break: break-word; font-size: 14px; font-weight: 500; line-height: 1.52; }

/* ---------- 底部官网入口 ---------- */
.yq-kf-foot { margin-top: 4px; }
.yq-kf-btn-main {
  display: block; width: 100%;
  padding: 13px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-align: center; color: #fff;
  background-image: linear-gradient(135deg, #0a3f85 0%, #1560bd 58%, #2b8ef0 100%);
  box-shadow: 0 8px 20px rgba(11, 74, 153, .26);
}
.yq-kf-fn { margin-top: 10px !important; font-size: 11.5px; color: var(--yq-ink-3); text-align: center; line-height: 1.7; }
.yq-kf-fn a { color: var(--yq-blue); text-decoration: underline; word-break: break-all; }

/* ---------- 桌面端（≥900px）：页面加宽 + 两栏卡片 ---------- */
@media screen and (min-width: 900px) {
  /* 只给「联系客服」页放宽限宽栏；其它页仍是 440px 手机栏 */
  body.pages-home-callKefu { --yq-frame: 1180px; }
  body.pages-home-callKefu uni-app { max-width: 1180px !important; }

  .yq-kf-in { padding: 22px 26px 38px; }
  .yq-kf-hero { display: flex; align-items: center; gap: 28px; padding: 26px 30px; border-radius: 20px; }
  .yq-kf-hmain { flex: 1 1 auto; min-width: 0; }
  .yq-kf-brand { font-size: 25px; }
  .yq-kf-slogan { font-size: 14px !important; }
  .yq-kf-hact { flex: 0 0 340px; margin-top: 0; }
  .yq-kf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .yq-kf-card { margin-bottom: 0; padding: 6px 20px 10px; }
  .yq-kf-card-wide { grid-column: 1 / -1; }
  .yq-kf-card-wide .yq-kf-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
  .yq-kf-card-wide .yq-kf-body > .yq-kf-row:nth-last-child(-n+2) { border-bottom: 0; }
  .yq-kf-row { padding: 12px 0; }
  .yq-kf-foot { margin-top: 20px; }
  .yq-kf-btn-main { max-width: 420px; margin: 0 auto; }
}

@media screen and (min-width: 1400px) {
  .yq-kf-in { padding: 26px 34px 44px; }
}

/* ===========================================================================
   13. 电脑端「查价 → 报价」页（#/pages/home/queryFreight + estimatedResult）
   ---------------------------------------------------------------------------
   参考：用户提供的上游「查询报价」电脑端页面
     · 顶部一行多列表单（标签在上、控件在下）+ 整行提交
     · 下方宽表格：表头灰底 / 行分隔 / 总费用红色加粗 / 备注「查看备注」/ 右侧蓝色操作按钮
   已实测的 rpx 规律：视口 ≥800px 后 rpx 冻结在 800 基准
     （.tp-h88 → 93px、.tp-pd20 → 21px），故桌面端要把这些死值直接覆写成 px。
   ⚠ 运行期 body 的 font-size 是 29px，本节所有文字都显式声明字号。
   =========================================================================== */

/* 桌面端宽表格默认隐藏 —— 手机端只看卡片列表。
   ⚠ 这条必须放在媒体查询「外面」：只在 @media 里写 display:block 的话，
     窄屏下没有规则接管，容器会以默认 block 显示出一堆没样式的表格内容。 */
.yq-rt-wrap { display: none; }

@media screen and (min-width: 900px) {

  /* 两个页面都放宽限宽栏（其它页仍是 440px 手机栏） */
  body.pages-home-queryFreight,
  body.pages-home-estimatedResult { --yq-frame: 1180px; }

  /* -------------------------------------------------------------------------
     13.1 查价表单页：纯 CSS 多列顶栏（用 :has() 定位表单容器，零 JS 改动）
     表单容器 = uni-view.tp-pd20 且直接子级里有 .tp-lh64 标签
     10 个直接子节点顺序固定：
       1 目的地标签 2 目的地控件 3 推荐国家 4 货物类型标签 5 货物类型控件
       6 重量标签 7 重量控件 8 尺寸标签 9 尺寸控件 10 提交按钮
     ------------------------------------------------------------------------- */
  uni-view.tp-pd20:has(> uni-view.tp-lh64) {
    display: grid !important;
    /* 第 4 列（尺寸）给宽一点，否则 3 个输入框里 "长: 厘米/cm" 这类 placeholder 会被裁掉 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.72fr);
    grid-auto-rows: auto;
    gap: 4px 22px;
    align-items: start;
    margin: 0 26px 20px !important;
    padding: 22px 26px 26px !important;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.055);
  }
  /* 标签行：小号灰字，紧贴控件上方 */
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.tp-lh64 {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--yq-ink-3) !important;
    font-weight: 500 !important;
    margin-top: 16px !important;
  }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; margin-top: 0 !important; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(3) { grid-area: 3 / 1 / 4 / 5; margin-top: 14px !important; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(4) { grid-area: 1 / 2 / 2 / 3; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(6) { grid-area: 1 / 3 / 2 / 4; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(7) { grid-area: 2 / 3 / 3 / 4; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(8) { grid-area: 1 / 4 / 2 / 5; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(9) { grid-area: 2 / 4 / 3 / 5; }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(10) {
    grid-area: 4 / 3 / 5 / 5;
    width: 100% !important;
    margin: 26px 0 0 0 !important;
  }

  /* 控件盒：死值 93px 压到 54px，补描边 */
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.tp-bgf.tp-h88,
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.flex_between.tp-h88 {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 12px !important;
    border: 1px solid var(--yq-line);
    box-shadow: none !important;
    padding: 0 16px !important;
  }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.tp-bgf.tp-h88:hover,
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.flex_between.tp-h88:hover {
    border-color: var(--yq-blue-line);
    background-color: #FCFDFF !important;
  }
  /* 尺寸那一格的 3 个输入：把 32% 死宽改成等分 */
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.flex_between.tp-h88 {
    display: flex !important;
    gap: 10px;
    padding: 0 !important;
  }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.flex_between.tp-h88 > uni-input {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 54px !important;
    border-radius: 12px !important;
    border: 1px solid var(--yq-line);
    /* 内边距压到 10px：3 个框各约 133px，padding 14px 时 "长: 厘米/cm" 会被裁掉 */
    padding: 0 10px !important;
    /* 字号略降，保证 "长: 厘米/cm" 完整可见（118px 框内） */
    font-size: 13.5px !important;
  }
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.flex_between.tp-h88 > uni-input:focus-within {
    border-color: var(--yq-blue);
  }
  /* 推荐国家 chips 区 */
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-view.example-body { margin-top: 14px !important; }
  /* 提交按钮 */
  uni-view.tp-pd20:has(> uni-view.tp-lh64) > uni-button.tp-btn-h88 {
    height: 54px !important;
    line-height: 54px !important;
    padding: 0 !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* 顶部提示块 → 参考图那种「备注」说明框，压缩高度
     ⚠ 别用 :has(jyf-parser)：线上实测该组件的 DOM 里并没有 <jyf-parser> 元素
       （解析后是普通 uni-view），只有 <uni-view>。用「不含标签的 tp-pd20」来定位才准。 */
  uni-view.tp-pd20:not(:has(> uni-view.tp-lh64)) { margin: 22px 26px 16px !important; padding: 0 !important; }
  uni-view.tp-pd20:not(:has(> uni-view.tp-lh64)) > uni-view.tp-bgf {
    max-height: 132px;
    overflow: auto;
    border-radius: 14px !important;
    border: 1px solid var(--yq-line);
    padding: 16px 20px !important;
    font-size: 13px;
    line-height: 1.7;
    color: var(--yq-ink-2);
  }
  uni-view.tp-pd20:not(:has(> uni-view.tp-lh64)) > uni-view.tp-bgf * { font-size: 13px !important; }
  uni-view.tp-pd20:not(:has(> uni-view.tp-lh64)) > uni-view.tp-bgf p { margin: 0 0 6px !important; }

  /* -------------------------------------------------------------------------
     13.2 报价结果页：桌面端宽表格；手机卡片保留
     ------------------------------------------------------------------------- */
  /* 手机端才显示的两块：寄件信息卡 + 渠道卡片列表 */
  body.pages-home-estimatedResult uni-view.tp-bgf.tp-br8:not(.tp-pb20),
  body.pages-home-estimatedResult .yq-rmob { display: none !important; }

  .yq-rt-wrap { display: block; }

  .yq-rt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--yq-ink);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.055);
    overflow: hidden;
  }
  .yq-rt, .yq-rt *, .yq-rt *::before, .yq-rt *::after { box-sizing: border-box; }
  .yq-rt p { margin: 0; }

  /* 表头上方：寄件摘要 + 免责备注 */
  .yq-rt-top {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 28px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--yq-line);
  }
  .yq-rt-sum { flex: 1 1 420px; min-width: 0; }
  .yq-rt-sum h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--yq-ink); }
  .yq-rt-sum h2 em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--yq-ink-3); margin-left: 8px; }
  .yq-rt-kv { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13px; color: var(--yq-ink-2); }
  .yq-rt-kv b { color: var(--yq-red); font-weight: 600; }
  .yq-rt-kv i { font-style: normal; color: var(--yq-ink-3); }
  .yq-rt-disc {
    flex: 0 1 420px; min-width: 260px;
    background: #FFFBF2; border: 1px solid #FFE7C2; border-radius: 12px;
    padding: 12px 16px; font-size: 12.5px; line-height: 1.75; color: #7A5A21;
  }
  .yq-rt-disc b { display: block; margin-bottom: 3px; color: #8A5A12; }

  /* 表格 */
  .yq-rt-scroll { overflow-x: auto; }
  .yq-rt-tb { min-width: 980px; }
  .yq-rt-tr {
    display: grid;
    grid-template-columns:
      minmax(0, 2.4fr)   /* 渠道名称 */
      92px               /* 服务商 */
      118px              /* 计费重量 */
      124px              /* 总费用 */
      minmax(0, 1.25fr)  /* 预估时效 */
      minmax(0, 1.5fr)   /* 品类 / 限制 */
      96px               /* 备注 */
      92px;              /* 操作 */
    align-items: center;
    gap: 0 14px;
    padding: 0 22px;
  }
  .yq-rt-th {
    height: 46px;
    background: #F7F9FC;
    border-bottom: 1px solid #E8ECF3;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--yq-ink-2);
    white-space: nowrap;
  }
  .yq-rt-th .yq-rt-sort { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
  .yq-rt-th .yq-rt-sort:hover { color: var(--yq-blue); }
  .yq-rt-th .yq-rt-ar { font-size: 10px; opacity: .55; }
  .yq-rt-th .yq-rt-ar.on { opacity: 1; color: var(--yq-blue); }

  .yq-rt-body > .yq-rt-tr { min-height: 58px; border-bottom: 1px solid var(--yq-line); }
  .yq-rt-body > .yq-rt-tr:last-child { border-bottom: 0; }
  .yq-rt-body > .yq-rt-tr:hover { background: #FAFCFF; }
  .yq-rt-body > .yq-rt-tr.yq-rt-consult { background: #FFFCF7; }

  .yq-rt-nm {
    min-width: 0; display: flex; align-items: center; gap: 9px;
  }
  .yq-rt-nm .yq-rt-src {
    flex: none; font-size: 10.5px; font-weight: 600; color: #fff;
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
    background-image: linear-gradient(135deg, var(--yq-blue) 0%, var(--yq-navy-2) 100%);
  }
  .yq-rt-nm .yq-rt-t {
    min-width: 0; font-size: 14px; font-weight: 600; color: var(--yq-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .yq-rt-c { font-size: 13px; color: var(--yq-ink-2); }
  .yq-rt-cw { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--yq-ink); }
  .yq-rt-tot { font-size: 16px; font-weight: 700; color: var(--yq-red); white-space: nowrap; }
  .yq-rt-tot small { font-size: 11px; font-weight: 500; color: var(--yq-ink-3); margin-left: 3px; }
  .yq-rt-exp, .yq-rt-tg { font-size: 12.5px; color: var(--yq-ink-2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yq-rt-dash { color: #C3CAD6; }
  .yq-rt-tg span {
    display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px;
    font-size: 11px; line-height: 1.5; border-radius: 999px;
    background: var(--yq-blue-l); border: 1px solid var(--yq-blue-line); color: var(--yq-blue);
  }
  .yq-rt-act { display: flex; justify-content: flex-end; gap: 8px; }
  .yq-rt-a {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    color: var(--yq-blue); background: var(--yq-blue-l); border: 1px solid var(--yq-blue-line);
  }
  .yq-rt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-weight: 600; white-space: nowrap; color: #fff;
    background-image: linear-gradient(135deg, var(--yq-blue) 0%, var(--yq-blue-d) 100%);
    box-shadow: 0 4px 12px rgba(64,100,182,.26);
  }
  .yq-rt-a:hover, .yq-rt-btn:hover { -webkit-filter: brightness(1.05); filter: brightness(1.05); }
  .yq-rt-a:active, .yq-rt-btn:active { -webkit-filter: brightness(.94); filter: brightness(.94); }
  .yq-rt-src0 { background-image: linear-gradient(135deg, #8A93A3 0%, #6B7484 100%) !important; }
  .yq-rt-empty { padding: 46px 22px; text-align: center; color: var(--yq-ink-3); font-size: 13.5px; }
}

/* 结果页桌面端给底部下单栏留出位置 */
/* 底部留白由 JS 按「下单栏 + 提示条」实测高度动态设置（见 _yqpf） */

/* yq-bars-patch —— 底部操作条（结果页 + 详情页共用一套 .yq-pf-* 组件样式）
   ⚠ 幂等标记：构建脚本按本行剥离旧段后重新追加，勿手改本行 */
/* ===========================================================================
   底部操作条
   ---------------------------------------------------------------------------
   两条底栏共用同一套内部结构（JS 生成，类名固定）：
     <容器>                        #yq-progress（结果页） / .yq-dt-bar（详情页）
       ├─ .yq-pf-bar               仅加载态：细进度条
       └─ .yq-pf-row
            ├─ .yq-pf-msg          状态文案（内含 .yq-pf-sub 副文案）
            └─ .yq-pf-acts
                 ├─ .yq-pf-ol      「线上自助下单」
                 └─ .yq-pf-kf      「点击开始联系客服」→ 外链 contact.asp
   宽度口径：
     · 结果页 #yq-progress  → 贴合页面栅格（--yq-frame=1180）
     · 详情页 .yq-dt-bar    → 通栏贴浏览器左右两边（该页 --yq-frame=100%）
   ⚠ 刻意避开 :has()（老 Chromium 内核不支持会整条丢弃）
   =========================================================================== */

/* 旧的两层下单栏已废弃；万一有旧缓存入口建出它，直接藏掉 */
#yq-order-bar { display: none !important; }

/* 旧结果页底栏跨页残留的兜底：非结果页一律藏掉（正常情况由 JS 移除） */
body:not(.pages-home-estimatedResult) #yq-progress { display: none !important; }

/* ---------- 共用：移动端（默认）---------- */
.yq-pf-row { display: block; }
.yq-pf-msg { line-height: 1.5; color: #1B2433; }
.yq-pf-sub { display: block; font-style: normal; color: #8A93A3; margin-top: 4px; }
.yq-pf-acts { display: flex; gap: 10px; margin-top: 10px; }
.yq-pf-acts > * {
  flex: 1 1 0;
  min-width: 0;
  display: inline-block;
  text-align: center;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.yq-pf-ol { border: 1px solid #4064B6; color: #4064B6; background-color: #fff; }
.yq-pf-kf {
  background-image: linear-gradient(135deg, #4064B6 0%, #33529C 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(64,100,182,.26);
}

/* ---------- 结论/详情两页：桌面端都把内容与按钮做成「一条」---------- */
@media screen and (min-width: 768px) {
  #yq-progress {
    left: 0 !important;
    right: 0 !important;
    max-width: var(--yq-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

@media screen and (min-width: 900px) {
  /* 结果页：贴合页面栅格 1180，内容再内缩 43px 与表格内文对齐
     （43 = tp-ptb0lr20 的 21px + .yq-rt-tr 的 22px） */
  #yq-progress {
    max-width: var(--yq-frame) !important;
    padding: 10px 43px !important;
  }
  /* 详情页：通栏贴浏览器左右两边（该页 --yq-frame = 100%） */
  .yq-dt-bar {
    left: 0 !important;
    right: 0 !important;
    max-width: var(--yq-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 10px 43px !important;
  }
  /* 两条栏的内容一律单行：文案撑开、按钮靠右定宽 */
  .yq-pf-row { display: flex; align-items: center; gap: 20px; }
  .yq-pf-msg { flex: 1 1 auto; min-width: 0; font-size: 14px !important; line-height: 1.5 !important; }
  .yq-pf-msg b { font-size: 14px !important; }
  .yq-pf-sub { display: none !important; }
  .yq-pf-acts { flex: 0 0 auto; gap: 12px; margin-top: 0; }
  .yq-pf-acts > * {
    flex: 0 0 auto !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 14px !important;
    padding: 0 20px !important;
    min-width: 150px;
  }
  .yq-pf-kf { min-width: 176px; }
  .yq-pf-bar { height: 4px !important; margin-bottom: 8px !important; }
}

/* ===========================================================================
   yq-detail-patch —— 「估算结果详情」页（#/pages/home/estimatedResultDetail）
   ---------------------------------------------------------------------------
   改前：1440 下 uni-app 仍被限成 440px 居中（手机版式）→ "电脑端异常"。
   改后：PC 端整页通栏贴浏览器左右两边，六张卡片排成两列网格。
   卡片顺序（render 里的直接子节点）：
     1 导航包装层 · 2 寄件信息 · 3 寄运信息 · 4 计费标准
     · 5 路线特点 · (6 数据统计，条件渲染) · 邮寄限制 · .tp-h98 占位
   =========================================================================== */

/* ---------- 详情页底部操作条 ---------- */
.yq-dt-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9989;
  background: #fff;
  border-top: 1px solid #EEF0F4;
  box-shadow: 0 -3px 16px rgba(16,24,40,.10);
  box-sizing: border-box;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}
body.pages-home-estimatedResultDetail uni-page-body { padding-bottom: 130px !important; }

@media screen and (min-width: 900px) {
  .yq-dt-bar { padding: 10px 43px !important; }
  body.pages-home-estimatedResultDetail uni-page-body { padding-bottom: 90px !important; }

  /* ---------- 详情页整页：通栏贴浏览器左右两边 ---------- */
  body.pages-home-estimatedResultDetail { --yq-frame: 100%; }

  body.pages-home-estimatedResultDetail uni-page-body > uni-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
    padding: 16px 28px 24px;
    box-sizing: border-box;
  }
  /* 导航包装层 / 寄件信息摘要 / 底部占位：横跨两列 */
  body.pages-home-estimatedResultDetail uni-page-body > uni-view > :nth-child(1),
  body.pages-home-estimatedResultDetail uni-page-body > uni-view > :nth-child(2),
  body.pages-home-estimatedResultDetail uni-page-body > uni-view > .tp-h98 {
    grid-column: 1 / -1;
  }
  /* 最后一张卡（邮寄限制，长文案）也横跨两列；倒数第二个恰好是它（最后一个是 .tp-h98） */
  body.pages-home-estimatedResultDetail uni-page-body > uni-view > :nth-last-child(2) {
    grid-column: 1 / -1;
  }
  body.pages-home-estimatedResultDetail uni-page-body > uni-view > .tp-h98 {
    height: 0 !important;
  }
  /* 原来自带的左右外边距交给网格 gap */
  body.pages-home-estimatedResultDetail uni-page-body > uni-view > uni-view.tp-ptb0lr20 {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 卡片：统一内边距，内部行不再各留一份左右 padding */
  body.pages-home-estimatedResultDetail uni-view.tp-bgf.tp-br8 {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 14px !important;
  }
  body.pages-home-estimatedResultDetail uni-view.tp-bgf.tp-br8 > uni-view {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 卡片标题行不要再撑 72px 高 */
  body.pages-home-estimatedResultDetail uni-view.tp-bgf.tp-br8 > uni-view.tp-h72 {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 8px !important;
  }
}

/* ===========================================================================
   yq-fullbleed —— 查价表单页在 PC 端「铺满浏览器宽度」
   ---------------------------------------------------------------------------
   反馈：queryFreight 在 1920 屏上是 1180px 居中，左右各留 370px 空档
         （实测 uni-app l=370 / r=1550），"有缝隙不符合审美"。
   机制：皮肤基础规则就是 uni-app{max-width:var(--yq-frame)!important}，
         而本页被上文 13 节显式钉成 --yq-frame:1180px ⇒ 这里改回 100%。
   配套：① 顶层内容块的左右外边距由固定 26px 改成随视口自适应
             —— 必须只作用于「非 .tp-bgf」的顶层块：页面上有两块
                .tp-pd20（标题块 #1、表单网格 #3）互为兄弟，外加一块
                嵌在 #1 里的 .tp-bgf.tp-pd20（#2，白卡）。若不加 :not(.tp-bgf)，
                #2 会再内缩一次而与 #1 错位。
         ② 提交按钮定宽 340px 靠右，避免随页面拉成超长条。
   ⚠ 下面每条都带 body.pages-home-queryFreight 前缀：上文同族规则同为
     !important，只能靠"选择器更具体"取胜（同特异性时才是后写的赢）。
   =========================================================================== */
@media screen and (min-width: 900px) {
  body.pages-home-queryFreight {
    --yq-frame: 100%;
    --yq-gut: clamp(24px, 3vw, 56px);
  }
  body.pages-home-queryFreight uni-view.tp-pd20:not(.tp-bgf) {
    margin-left: var(--yq-gut) !important;
    margin-right: var(--yq-gut) !important;
  }
  body.pages-home-queryFreight uni-view.tp-pd20:has(> uni-view.tp-lh64) > :nth-child(10) {
    width: min(340px, 100%) !important;
    justify-self: end;
  }
}

/* ===========================================================================
   yq-pc-full —— v11「整站 PC 端通栏自适应」（含 #/ 首页与全部 #/pages/*）
   ---------------------------------------------------------------------------
   反馈：整站电脑端仍是 440px 居中窄栏，两侧大片留白，要求「通栏自适应贴浏览器
         左右两边」「全部完成样式皮肤修复电脑端」。
   根因（三处一起把宽度钉死在 440px）：
     · index.html 的内联首屏样式：uni-app{max-width:440px!important}
     · 皮肤基础规则：uni-app{max-width:var(--yq-frame)!important}，默认 --yq-frame:440px
     · 固顶导航 uni-page-head / 固底 uni-tabbar / ColorUI .cu-bar.fixed 同样挂 --yq-frame
   而皮肤里只有 4 个页面（queryFreight / estimatedResult / estimatedResultDetail /
   callKefu）写过 ≥900px 的加宽规则 —— 其余 20+ 页从未放宽。
   修法：把 --yq-frame 在 ≥900px 时全局改成 100%，**一次覆盖全部页面**
         （包括本地未登录、扫描不到的那些：tabbar/* · parcel/* · mine/*）。
         导航 / tabbar / cu-bar 都挂这个变量，所以一并跟着铺满，无需逐条改。
   ⚠ 必须带 !important：上文有 body.pages-xxx{--yq-frame:1180px} 这类按页钉值，
     同为作者声明时「特异性高者胜」，只有 !important 能压过。
   ⚠ 另有 **硬值**（非变量）必须单独覆盖：body.pages-home-callKefu 的
     uni-app{max-width:1180px!important}。
   ⚠ 断点取 900px，与本项目既有桌面规则一致；768~899 保持手机栏（该区间也没有桌面网格）。
   =========================================================================== */
@media screen and (min-width: 900px) {
  body {
    --yq-frame: 100% !important;
    --yq-gut: clamp(24px, 3vw, 56px);
  }
  /* callKefu 是硬值而非变量，光改变量无效 */
  body.pages-home-callKefu uni-app { max-width: 100% !important; }
}

/* ===========================================================================
   yq-pc-full-2 —— v11 冒头问题收尾（通栏后暴露出来的）
   ---------------------------------------------------------------------------
   2.1 顶部 hero 大图：宽度铺满后按原比例等比放大，高度完全失控。
       实测 pages/other/queryIndex 的 uni-image.tp-w100 由 440x172 → 1920x748，
       把整屏占满。PC 端封顶 + object-fit 裁切，恢复横幅观感。
   2.2 表单类页面（登录 / 注册 / 找回密码）：输入框被拉到 ~1800px，不可用。
       收成一列居中卡片 —— 与站内既有约定一致（「我的-实名认证」用的就是
       .tp-m0a + .tp-w620 ⇒ 实测 661px 居中）。**页面背景仍然通栏铺满**，
       只是内容列收窄到可读宽度。
   =========================================================================== */
@media screen and (min-width: 900px) {

  /* ---------- 2.1 hero 大图封顶 ---------- */
  body.pages-other-login uni-image.tp-w100,
  body.pages-other-queryIndex uni-image.tp-w100 {
    height: clamp(220px, 30vh, 340px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body.pages-other-login uni-image.tp-w100 > div,
  body.pages-other-login uni-image.tp-w100 img,
  body.pages-other-queryIndex uni-image.tp-w100 > div,
  body.pages-other-queryIndex uni-image.tp-w100 img {
    width: 100% !important;
    height: 100% !important;
  }
  /* ⚠⚠ 真正的绘制层不是 <img>，而是 uni-image 内部的 div 用 background-image 画的，
     且 uni-app 默认给了 background-size:100% 100%（非等比拉伸）。
     我第一版改 img 的 object-fit 完全没碰到它 —— 背景层才是要覆盖的对象。 */
  body.pages-other-login uni-image.tp-w100 > div,
  body.pages-other-queryIndex uni-image.tp-w100 > div {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  /* 原图 750x440（1.7:1）：cover 到全宽横幅后约 117px 源高可见，
     logo 在源图纵向 ~50%（183..255 / 440）⇒ center 正好把它带进来。 */

  /* ---------- 2.2 表单页：内容收成一列居中（页面仍通栏） ---------- */
  body.pages-other-login uni-page-body > uni-view > uni-view.tp-ptb0lr40,
  body.pages-other-login uni-page-body > uni-view > uni-view.level_align.flex_around,
  body.pages-other-registered uni-page-body > uni-view > uni-view.form-box,
  body.pages-other-forgotPwd uni-page-body > uni-view > uni-view.form-box {
    max-width: 660px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* ===========================================================================
   yq-country —— 查价页「选择国家」弹层：搜索框 + 排版收尾（移动端同样生效）
   ---------------------------------------------------------------------------
   改前问题（实测 1440x900）：
     · 只有 A-Z 索引 + 标签墙，414 个国家只能靠肉眼翻；数据里还混着前导空格 /
       「（暂停）」/ 多国拼接的脏条目
     · A-Z 索引条实测 t=84 b=920（高 836px）—— **冲出弹层 124px、越过视口底 20px**
   =========================================================================== */

/* ---------- 搜索行（列表卡片内第一格） ---------- */
.yq-cs {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 52px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #fff;
  border-bottom: 1px solid #EEF0F4;
}
.yq-cs-ic, .yq-cs-x { flex: 0 0 auto; }
.yq-cs-x { cursor: pointer; }
.yq-cs-in {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
}
.yq-cs-in .uni-input-wrapper { height: 100% !important; }
.yq-cs-in input,
.yq-cs-in .uni-input-input { font-size: 14px !important; }
.yq-cs-in .uni-input-placeholder { font-size: 14px !important; color: #9AA3B2 !important; }
/* 空态：改前是「一大块白 + 一行孤零零的小灰字贴在顶部」，实测 1440 下内容区
   500+px 全空 ⇒ 视觉上像页面坏了。改成 图标 + 垂直居中 的提示卡。 */
.yq-cs-none {
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px !important;
  padding: 26px 16px !important;
  box-sizing: border-box !important;
  text-align: center;
  color: #6B7482 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}
/* 失败图标：圆 + 叉。纯 ASCII data-URI，不依赖任何字体/外链 */
.yq-cs-none::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='20' fill='none' stroke='%23D6DCE6' stroke-width='2'/%3E%3Cpath d='M15.5 15.5 L32.5 32.5 M32.5 15.5 L15.5 32.5' stroke='%23C0C9D6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 列表卡片：flex 纵向 + 给 A-Z 索引一个定位父级 ---------- */
.yq-cc {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}
.yq-cc-s {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}
/* A-Z 索引：卡片底部一条横向索引行
   ⚠ 原先它是 position:absolute 的竖条，靠 right/top:52px 定位；但实测垂直方向的
     定位父级不是卡片（期望 top=239 实际 -50，整体上移 289px）→ 压住弹层头部。
     改成静态流式的 flex 行：不可能遮挡，且不依赖任何祖先的 position/transform。 */
/* ⚠⚠ width/float 必须显式覆盖：`.letter-box` 的原始样式**不在皮肤里**，而是随页面
   chunk 一起注入的 scoped CSS（height:100% / width:64px / position:absolute），
   所以只覆盖 position 是不够的 —— 宽度会残留 64px，横排被折成 12 行。 */
.yq-cc-l {
  flex: 0 0 auto !important;
  width: 100% !important;
  align-self: stretch !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  /* ⚠⚠ 原规则还有 `top:50%` + `transform:translateY(-50%)`（垂直居中老竖条的写法）。
     transform 会残留：实测横排条被上移自身高度的一半（35/2≈17px）压住滚动区。 */
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  background: #FAFBFC;
  border-top: 1px solid #EEF0F4;
  overflow: hidden !important;
}
.yq-cc-l > * {
  font-size: 12px !important;
  line-height: 22px !important;
  height: 22px !important;
  min-height: 0 !important;
  width: 22px !important;
  text-align: center !important;
  border-radius: 4px !important;
  color: #5A6474;
  cursor: pointer;
}
.yq-cc-l > *:active { background: #E3EBFC; }
.yq-cc-l > *:first-child { display: none !important; }   /* 数据里 letter 为 null 的空条目 */
/* 搜索态下没有字母可跳 ⇒ 索引条为空，直接整条隐藏（否则底部留一条白带+分隔线） */
.yq-cc-l:empty { display: none !important; }

/* ---------- 分组标题 + 国家标签 ---------- */
.yq-cc-h { position: sticky !important; top: 0 !important; z-index: 2 !important; }
.yq-cc-g { padding-bottom: 6px; }

/* 标签墙：内容自适应宽度 + 绝不裁字
   实测：条目 class 带 tp-fz22（22rpx，按本站 rpx 基线 ≈23px），字号过大导致
   「文莱 · BN」在 82px 里被截成「文…」。故把标签内字号显式压到 12px，
   并去掉 overflow:hidden / text-overflow:ellipsis（宁可换行也不裁字）。 */
.yq-cc-t {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.yq-cc-t .uni-tag {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.yq-cc-t .uni-tag .uni-tag-text,
.yq-cc-t .uni-tag uni-text,
.yq-cc-t .uni-tag span {
  font-size: 12px !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}