/* =============== Reset & Base =============== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC";
}
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

body {
  margin: 0;
  padding: 0;
  background-color: #EFEEF3;
  background: linear-gradient(168deg, #FCF1FB 0%, #FFDED4 50.64%, #F9D2FF 99.39%);
  background-repeat: no-repeat;
  /* 去掉这一行：
  background-attachment: fixed;
  */
  background-size: cover;
  -ms-overflow-style: none;
}

/* ===== 可调参数（一处总控） ===== */
:root{
  --search-block-margin-y: 8px;

  --search-pad-y: 6px;
  --search-pad-x: 12px;
  --search-radius: 18px;

  --search-col-left: clamp(275px, 71vw, 624px);
  --search-gap: 12px;

  --gap-filter-to-features: 8px;

  --filter-btn-h: 44px;
  --filter-btn-fs: 15px;
  --filter-btn-radius: 22px;
  --filter-btn-padx: 18px;
  --filter-btn-minw: 120px;
  --filter-btn-maxw: 150px;

  --actions-gap: 18px;
  --actions-edge-pad: 15px;

  --area-actions-gap: 12px;
  --area-actions-edge-pad: 32px;

  --tag-item-minh: 20px;
  --tag-item-pady: 8px;
  --tag-item-fs: 14px;
  --tag-item-maxw: 85px;
  --tag-grid-min: 110px;

  --tags-buttons-gap-top: 5px;

  /* ===== 置顶徽标（左上贴边） ===== */
  --pin-size: 40px;
  --pin-gap-x: -1px;
  --pin-gap-y: -1px;
}

html, body {
  overflow-y: scroll;
  height: 100%;
}

.container { margin-bottom: 50px; }

/* =============== 顶部搜索（输入框与图标分离） =============== */
.search-container {
  display: grid;
  grid-template-columns: var(--search-col-left) auto;
  align-items: center;
  column-gap: var(--search-gap);
  margin: var(--search-block-margin-y) 10px var(--search-block-margin-y);
}

.search-container .search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: var(--search-radius);
  padding: var(--search-pad-y) var(--search-pad-x);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: text;
}

.search-container input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}

.search-container .search-icon {
  margin-right: 8px;
  color: #666;
  line-height: 0;
}

.search-container .links {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
}

.search-container .links .search-link-img {
  flex: 0 0 auto;
  line-height: 0;
  overflow: visible;
}

.search-container .links .search-link-img img {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  object-fit: cover;
}

#iconGroup, #iconChannel{
  width: 35px !important;
  height: 33px !important;
  display: block;
  object-fit: contain !important;
  border-radius: 0 !important;
}

@media (max-width: 360px){
  .search-container{
    grid-template-columns: clamp(200px, 56vw, 460px) auto;
    column-gap: 10px;
  }
}

/* =============== 顶部分类按钮 =============== */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 8px var(--gap-filter-to-features);
}
.filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  min-height: 32px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border-style: none;
  background-color: #fff;
  color: #333;
  flex: 1 1 20%;
  box-sizing: border-box;
}
.filter-button.active { background-color: #FFB84D; color: #fff; }

/* =============== 顶部筛选条 & 下拉容器 =============== */
.filter-container { position: relative; }

.filter-dropdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 8px 2px;
  padding: 5px;
  justify-content: space-between;
  border-radius: 7px;
  background-color: #fff;
}
.dropdown-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.dropdown-item .title span{ color: #999; font-size: 12px; }
.dropdown-item .title .name{ margin-right: 1px; }
.dropdown-item select{
  border-style: none;
  background-color: #fff;
  font-size: 12px;
  color: #ccc;
}

/* ======= 新：SVG 箭头（默认↑，激活后↓） ======= */
.dropdown-item .arrow-svg{
  display:inline-block;
  transform: rotate(180deg);
  transition: transform .2s ease;
}
.dropdown-item.active .arrow-svg{ transform: rotate(0deg); }

/* 通用下拉容器（贴紧状态栏，覆盖页面） */
.dropdown-container{
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 0 0 15px 15px;
  margin-top: 5px;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 9999;
  font-size: 12px;
  left: 0;
  right: 0;
}

/* =============== 灰色遮罩（top 由 JS 动态设为面板底部） =============== */
.dropdown-mask{
  position: fixed;
  top: 0;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: 9990;
  display: none;
}
.dropdown-mask::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-15px;
  height:15px;
  background: rgba(0,0,0,.35);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

/* =============== 地区抽屉（50% 高度，可滚动） =============== */
.area-container {
  padding: 0;
  height: 50vh;
  max-height: 50vh;
  overflow: hidden;
  display: none;
}
.area-drawer{
  display: grid;
  grid-template-rows: 1fr auto;
  height: 50vh;
  background: #fff;
  border-radius: 0 0 15px 15px;
}
.area-list{
  overflow: auto;
  padding: 12px 8px 8px;
}
.area-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  margin: 0 4px 8px;
  background: #F7F8FC;
  border-radius: 12px;
  cursor: pointer;
  transition: .18s ease;
}
.area-item.active{
  background: #FFEFD6;
  box-shadow: inset 0 0 0 2px #FFB84D;
}
.area-item .area-item-name{ color:#333; }
.area-item .selected{ color:#FFB84D; }

/* —— 上海（地区）按钮条 —— */
.area-actions{
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 10px var(--area-actions-edge-pad) 20px;
  border-top: 1px dashed #f0f0f0;
  background: #fff;
}
.area-actions .btn{
  flex: 0 1 var(--filter-btn-maxw);
  min-width: var(--filter-btn-minw);
  height: var(--filter-btn-h);
  border-radius: var(--filter-btn-radius);
  font-size: var(--filter-btn-fs);
  cursor: pointer;
  transition: .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--filter-btn-padx);
  line-height: calc(var(--filter-btn-h) - 2px);
}
.area-actions .btn-reset{
  border: 2px solid #ffaa00;
  background: #fff;
  color: #ffaa00;
}
.area-actions .btn-ok{
  border: 0;
  background: #ffaa00;
  color: #fff;
}

/* =============== 特点（标签） =============== */
.tags-container .tags-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tag-grid-min), 1fr));
  gap: 12px 14px;
  justify-items: center;
}
.tags-container .tags-list .tag-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tag-item-minh);
  padding: var(--tag-item-pady) 10px;
  width: 100%;
  max-width: var(--tag-item-maxw);
  border-radius: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #F7F8FC;
  color: #333;
  font-size: var(--tag-item-fs);
}
.tags-container .tags-list .tag-item.active {
  background-color: #ffaa00;
  color: #fff;
}
.tags-container .tags-list .tag-item:hover:not(.active) { background-color: #f0f0f0; }

.tags-container.dropdown-container { padding-bottom: 7px; }
.tags-container { padding-bottom: 5px; }
.tags-container .tags-buttons{
  display: flex;
  justify-content: space-between;
  gap: var(--actions-gap);
  margin-top: var(--tags-buttons-gap-top);
  padding: 12px var(--actions-edge-pad) 12px;
  background-color: #fff;
  border-radius: 12px;
}
.tags-container .tags-buttons .tags-button {
  flex: 0 1 var(--filter-btn-maxw);
  min-width: var(--filter-btn-minw);
  height: var(--filter-btn-h);
  line-height: calc(var(--filter-btn-h) - 2px);
  border-radius: var(--filter-btn-radius);
  font-size: var(--filter-btn-fs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--filter-btn-padx);
  cursor: pointer;
  transition: all 0.3s ease;
}
.tags-container .tags-buttons .reset-btn {
  border: 2px solid #ffaa00;
  color: #ffaa00;
  background-color: transparent;
}
.tags-container .tags-buttons .confirm-btn {
  background-color: #ffaa00;
  color: #fff;
  border: 0;
}

/* =============== 推荐（按钮风格与标签一致） =============== */
.recommend-container .recommend-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tag-grid-min), 1fr));
  gap: 12px 14px;
  justify-items: center;
}
.recommend-container .recommend-list .recommend-item{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tag-item-minh);
  padding: var(--tag-item-pady) 10px;
  width: 100%;
  max-width: var(--tag-item-maxw);
  border-radius: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #F7F8FC;
  color: #333;
  font-size: var(--tag-item-fs);
}
.recommend-container .recommend-list .recommend-item.active{
  background-color: #ffaa00;
  color: #fff;
}
.recommend-container .recommend-list .recommend-item:hover:not(.active){
  background-color: #f0f0f0;
}

/* =============== 列表卡片 =============== */
.service-list {
  display: grid;
  padding: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.service-card {
  position: relative;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.service-card .avatar { position: relative; }

/* 仅封面图铺满，角标不拉伸 */
.service-card .avatar img.cover{
  border-radius: 10px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.service-card .top{ position:absolute; top:0; left:0; color:#E1A581; display:inline-block; }
.service-card .top::before{ content:''; position:absolute; inset:0; background-color:orange; z-index:-1; }
.service-card .top span{ font-size:40px; z-index:1; }

/* 名字上移：减小信息块上内边距 */
.service-info { padding: 6px 10px 10px; }
.service-name { font-size: 16px; font-weight: bold; margin-bottom: 5px; }

.service-id { display:flex; align-items:center; margin-bottom:5px; gap: 1px; }
.service-id .num {
  background-color: #FFB84D;
  color: white;
  padding: 3px 8px;
  border-radius: 15px;
  font-size: 12px;
}

/* SVG 徽章（行内徽章，非置顶角标） */
.service-id .badge-svg {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  vertical-align: middle;
}
.service-id .badge-svg img {
  width: 54px;
  height: 18px;
  display: block;
}

/* 旧文字徽章（兜底） */
.service-id span.tag { color:#fff; padding:2px 8px 3px; border-radius:15px; font-size:12px; }
.service-id span.tag span{ background:none; margin-right:3px; color:#fff; font-size:12px; }
.service-id span.recommend { background-color: #2AB7F8; }
.service-id span.wangpai   { background: linear-gradient(180deg, #FF5D01 0%, #FF7E01 100%); }
.service-id span.hongpai   { background-color: #FF4848; }
.service-id span.haoping   { background-color: #F27CFF; }
.service-id span.xinren    { background-color: #0FD4B4; }

.location { display:flex; align-items:center; margin-bottom:5px; font-size:14px; color:#9D9D9D; }
.location i { margin-right: 5px; color: #f0f0f0; }
.location i span{ color:#9D9D9D; }

.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.tags .tag { padding:3px 8px; border-radius:15px; font-size:12px; }

/* 价格角标（默认右上） */
.price-tag {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #333;
  opacity: 0.5;
  color: white;
  padding: 3px 8px;
  border-radius: 0 0 0 10px;
  font-size: 12px;
}
.price-tag .qianbao{ color: #FBD97C; }

/* 距离角标 */
.distance {
  position: absolute;
  bottom: 5px;
  left: 0;
  background-color: #333;
  opacity: 0.5;
  color: white;
  padding: 3px 8px;
  border-radius: 0 5px 0 10px;
  font-size: 12px;

  /* NEW: 距离图标与文字对齐 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.distance .jl{
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -1px;
}

/* ===== 置顶角标：左上贴边 ===== */
.service-card .pin-badge-svg{
  position: absolute;
  top: var(--pin-gap-y);
  left: var(--pin-gap-x);
  right: auto;
  width: var(--pin-size);
  height: var(--pin-size);
  z-index: 4;
  pointer-events: none;
  display: block;
}

/* 回到顶部按钮 */
.action-button {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: linear-gradient(to right, #FE756E, #FB5679);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 500;
}
.action-button span{ font-size: 24px; }
.ml-10{ margin-left: 10px; }

/* Toast */
.toast-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 12000;
}
.toast {
  position: absolute;
  top: 10%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,0.8);
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  min-width: 200px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.toast.show { opacity: 0.6; }


.footer a {
  text-decoration: none;
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 32px 2px;
}
.footer a:hover,
.footer a.active { color: #FFA500; }
.footer img { width: 20px; height: 20px; margin-bottom: 5px; }

/* =============== 距离面板（统一按钮规格） =============== */
.distance-container { }

/* 行布局 */
.distance-panel .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.distance-panel .row.between { justify-content: space-between; }
.distance-panel .label { color: #333; min-width: 64px; font-size: 16px; font-weight: 600; }

/* 输入 + 放大镜图标 */
.input-with-icon {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-icon .search-svg{
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}
.input-with-icon input {
  flex: 1;
  height: 38px;
  padding: 0 12px 0 34px; /* 给放大镜留出空间 */
  border: 1px solid #eee;
  border-radius: 20px;
  outline: none;
  background: #F7F8FC;
  font-size: 14px;  /* ★ 防止 iOS 聚焦时整页放大 */
}


/* 联想抽屉 */
#place-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  overflow: auto;
  max-height: 50vh;
  display: none;
  z-index: 10000;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.tips-item {
  padding: 10px 12px;
  border-bottom: 1px dashed #f0f0f0;
  cursor: pointer;
}
.tips-item:last-child { border-bottom: none; }
.tips-item .name {
  font-size: 13px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— 距离面板按钮条 —— */
.distance-actions{
  display: flex;
  justify-content: space-between;
  gap: 3px;
  margin-top: 10px;
  padding: 0 var(--actions-edge-pad);
  padding-bottom: 0px;
}
.distance-actions .btn{
  flex: 0 1 var(--filter-btn-maxw);
  min-width: var(--filter-btn-minw);
  height: var(--filter-btn-h);
  border-radius: var(--filter-btn-radius);
  font-size: var(--filter-btn-fs);
  cursor: pointer;
  transition: .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--filter-btn-padx);
  line-height: calc(var(--filter-btn-h) - 2px);
}
.distance-actions .btn-reset {
  border: 2px solid #ffaa00;
  background: #fff;
  color: #ffaa00;
}
.distance-actions .btn-ok {
  border: 0;
  background: #ffaa00;
  color: #fff;
}

/* 叠层优先级 */
.dropdown-container { z-index: 11000; }
#distance-container { z-index: 11000; }
.dropdown-mask { z-index: 10990; }
.footer { z-index: 800; }

/* —— 角标兜底：不拉伸 —— */
.service-card .avatar img.pin-badge-svg{
  width: var(--pin-size) !important;
  height: var(--pin-size) !important;
  object-fit: contain;
  border-radius: 0 !important;
}

/* =========================================================
 * ANDROID 专属紧凑样式（iOS 保持现状不变）
 * 通过 <html class="is-android"> 选择器生效
 * =======================================================*/

/* 1) 全局排版与溢出控制 */
html.is-android, html.is-android body {
  overflow-x: hidden; /* 杜绝横向滚动 */
}

html.is-android body {
  font-size: 14px;         /* Android 更紧凑；iOS 保持原样 */
  line-height: 1.35;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* 2) 图片与视频绝不出框（缩小但不放大） */
html.is-android img,
html.is-android video,
html.is-android canvas {
  max-width: 100%;
  height: auto;
}

/* 3) 变量级收紧：按钮/搜索区/封面图等 */
html.is-android :root{
  --search-block-margin-y: 6px;
  --search-pad-y: 5px;
  --search-pad-x: 10px;
  --search-radius: 16px;

  --search-col-left: clamp(240px, 66vw, 560px);

  --filter-btn-h: 40px;
  --filter-btn-fs: 14px;
  --filter-btn-radius: 20px;
  --filter-btn-padx: 14px;
  --filter-btn-minw: 98px;
  --filter-btn-maxw: 132px;

  --pin-size: 34px;
  --pin-gap-x: -1px;
  --pin-gap-y: -1px;

  --tag-item-fs: 13px;
  --tag-item-maxw: 80px;
  --tag-grid-min: 100px;
}

html.is-android .search-container .search-icon { margin-right: 6px; }
html.is-android #iconGroup,
html.is-android #iconChannel{
  width: 30px !important;
  height: 30px !important;
}

/* 卡片封面更矮，避免首屏挤出 */
html.is-android .service-card .avatar img.cover{
  height: 168px;
}

/* 价格/距离角标更紧凑 */
html.is-android .price-tag,
html.is-android .distance{
  font-size: 11px;
  padding: 2px 6px;
}

/* 抽屉按钮更紧凑，减少遮罩被迫滚动 */
html.is-android .area-actions .btn,
html.is-android .distance-actions .btn{
  height: 38px;
  line-height: 36px;
  font-size: 14px;
}

/* 顶部分类按钮在窄屏避免断词与外溢 */
html.is-android .filter-buttons{
  gap: 8px;
  margin: 4px 6px var(--gap-filter-to-features);
}
html.is-android .filter-button{
  min-height: 30px;
  font-size: 13px;
  padding: 3px 10px;
}

/* 联想抽屉在 Android 上略降高度，配合软键盘 */
html.is-android #place-suggest{ max-height: 42vh; }

/* 兜底：任何容器不允许超出视口宽度 */
html.is-android .container,
html.is-android .service-list,
html.is-android .filter-container{
  max-width: 100vw;
  overflow-x: hidden;
}


/* =========================================================
 * ANDROID · 窄屏自适配补丁（iOS 完全不受影响）
 * 触发条件：<html class="is-android"> 且 视口宽度 ≤ 360px
 * 目标：避免横向挤压；卡片改为单列；封面改为自适应比例；标签更紧凑
 * =======================================================*/
@media (max-width: 360px) {
  html.is-android, html.is-android body { overflow-x: hidden; }

  /* 顶部搜索：左列更窄、整体更紧凑 */
  html.is-android .search-container{
    grid-template-columns: clamp(200px, 58vw, 480px) auto;
    column-gap: 8px;
    margin: 6px 8px;
  }
  html.is-android .search-container .search-bar{
    padding: 5px 10px;
    border-radius: 16px;
  }
  html.is-android .search-container input{ font-size: 13px; }
  html.is-android #iconGroup,
  html.is-android #iconChannel{ width: 28px !important; height: 28px !important; }

  /* 顶部分类按钮更小，间距更小 */
  html.is-android .filter-buttons{
    gap: 8px;
    margin: 4px 6px 6px;
  }
  html.is-android .filter-button{
    min-height: 30px;
    font-size: 13px;
    padding: 3px 10px;
    flex: 1 1 22%;
  }

  /* 状态栏：行内元素更紧凑 */
  html.is-android .filter-dropdown{
    gap: 8px;
    margin: 2px 6px;
    padding: 5px 6px;
  }
  html.is-android .dropdown-item{ gap: 6px; font-size: 12px; }
  html.is-android .dropdown-item .title span{ font-size: 12px; }

  /* —— 列表改“单列” + 避免两列挤压 —— */
  html.is-android .service-list{
    grid-template-columns: 1fr;     /* 从 2 列切换到 1 列 */
    gap: 8px;
    padding: 8px;
  }
  /* 让 left/right 两列的子卡片按文档流合并到单列里 */
  html.is-android .service-list .left,
  html.is-android .service-list .right{
    display: contents;
  }

  /* 卡片整体更紧凑 */
  html.is-android .service-card{
    margin-bottom: 8px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
  }
  /* 名字上移同步：窄屏也降低上内边距 */
  html.is-android .service-info{ padding: 5px 10px 8px; }
  html.is-android .service-name{ font-size: 18px; }

  /* —— 封面图：不要固定 200px，高度用比例，避免被挤 —— */
  @supports (aspect-ratio: 3 / 2) {
    html.is-android .service-card .avatar img.cover{
      height: auto;            /* 覆盖原来的固定高度 */
      aspect-ratio: 16 / 11;   /* 稍矮一些，减少首屏占用 */
      object-fit: cover;
    }
  }
  /* 无 aspect-ratio 支持的兜底：用视口宽度近似高度 */
  @supports not (aspect-ratio: 3 / 2) {
    html.is-android .service-card .avatar img.cover{
      height: 58vw;            /* 单列下以屏宽估高 */
      object-fit: cover;
    }
  }

  /* 置顶角标与价格/距离角标更小，避免遮挡 */
  html.is-android .service-card .pin-badge-svg{
    width: 32px; height: 32px;
  }
  html.is-android .price-tag,
  html.is-android .distance{
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 0 5px 0 10px;
  }

  /* 编号徽章 + 标签更紧凑，避免“彩色豆”把一行撑爆 */
  html.is-android .service-id .num{
    font-size: 11px;
    padding: 2px 6px;
  }
  html.is-android .tags{ gap: 4px; }
  html.is-android .tags .tag{
    font-size: 12px;
    padding: 2px 6px;
    max-width: 44%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 底部导航更贴边更小，避免遮挡内容 */
  html.is-android .footer{
    height: 48px;
    font-size: 11px;
    padding: 4px 0;
  }
  html.is-android .footer a{ padding: 2px 24px 2px; }
  html.is-android .footer img{ width: 18px; height: 18px; }
  
  /* 距离面板/联想抽屉：键盘顶起时别太高 */
  html.is-android #place-suggest{ max-height: 42vh; }
  html.is-android .distance-panel .label{ font-size: 15px; }
  html.is-android .input-with-icon input{ height: 36px; font-size: 13px; }
}

/* （可选兜底）确保 ≥361px 的安卓强制两列，避免其它样式误改 */
@media (min-width: 361px){
  html.is-android .service-list{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
  }
  html.is-android .service-list .left,
  html.is-android .service-list .right{
    display: block;
  }
}

/* 名字上移：安卓常规屏也减小上内边距 */
html.is-android .service-info{ padding: 6px 10px 10px; }

/* =========================================================
 * ANDROID · 超窄屏也保持双列（强制收紧版）
 * 直接放在 base.css 最底部，覆盖前面规则
 * =======================================================*/
@media (max-width: 360px) {
  html.is-android .service-list{
    /* 原来此处是 1fr (单列)，改回双列并收紧间距 */
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  /* 防止 left/right 容器把内容拆成单列 */
  html.is-android .service-list .left,
  html.is-android .service-list .right{
    display: block !important;
  }

  /* 卡片整体更紧凑 */
  html.is-android .service-card{
    margin-bottom: 6px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.06) !important;
  }
  /* 名字上移同步：强制更小的上内边距 */
  html.is-android .service-info{ padding: 4px 10px 8px !important; }
  html.is-android .service-name{ font-size: 18px !important; }

  /* 封面图降低高度，给两列腾空间 */
  html.is-android .service-card .avatar img.cover{
    height: 150px !important;
  }

  /* 角标更小更贴边 */
  html.is-android .service-card .pin-badge-svg{
    width: 30px !important; height: 30px !important;
  }
  html.is-android .price-tag,
  html.is-android .distance{
    font-size: 10.5px !important;
    padding: 2px 5px !important;
    border-radius: 0 5px 0 8px !important;
  }

  /* 编号徽章与标签缩一号，避免换行把卡片拉高 */
  html.is-android .service-id .num{
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  html.is-android .tags{ gap: 4px !important; }
  html.is-android .tags .tag{
    font-size: 11.5px !important;
    padding: 2px 6px !important;
    max-width: 48% !important;  /* 防止单个标签太宽把布局撑裂 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 顶部搜索与分类再收一点，给网格让路 */
  html.is-android .search-container{
    grid-template-columns: clamp(190px, 56vw, 420px) auto !important;
    column-gap: 8px !important;
    margin: 6px 6px !important;
  }
  html.is-android .filter-buttons{
    gap: 8px !important;
    margin: 4px 6px 6px !important;
  }
  html.is-android .filter-button{
    min-height: 28px !important;
    font-size: 13px !important;
    padding: 3px 8px !important;
    flex: 1 1 24% !important;   /* 每排更易排满 */
  }
}

/* 保险：≥361px 的安卓强制两列，避免被其他样式意外覆盖 */
@media (min-width: 361px){
  html.is-android .service-list{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }
}

/* =========================================================
 * 顶部分类按钮修复：四等分 + 防止错位/折行
 * 放在 base.css 最底部，覆盖前面样式
 * =======================================================*/

/* 默认：四等分网格，按钮等宽对齐 */
.filter-buttons{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin: 6px 8px var(--gap-filter-to-features) !important;
}
.filter-button{
  /* 取消之前的 flex 自动伸缩，改为占满格子 */
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;

  /* 文本不换行，超出省略，避免把行撑高 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 视觉微调，防止高度过大 */
  min-height: 32px !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  border-radius: 20px !important;
}

/* 激活态保持不变（颜色不灰） */
.filter-button.active{
  background-color: #FFB84D !important;
  color: #fff !important;
  border: 0 !important;
}

/* 安卓：整体再紧凑一点，确保四个刚好一排 */
html.is-android .filter-buttons{
  gap: 8px !important;
}
html.is-android .filter-button{
  min-height: 30px !important;
  padding: 3px 8px !important;
  font-size: 13px !important;
}

/* 超窄屏（≤360px）：仍保持四等分，不折行不抖动 */
@media (max-width: 360px){
  .filter-buttons{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin: 4px 6px 6px !important;
  }
  .filter-button{
    min-height: 28px !important;
    padding: 2px 8px !important;
    font-size: 12.5px !important;
  }
}

/* 兜底：如果有历史样式把按钮设成灰或边框，把它们清掉 */
.filter-button{
  background-color: #fff;
  color: #333;
  border: none;
}



/* === 卡片名字上移（全局）=== */
.service-info{
  /* 原来是 6px 10px 10px；把顶部内边距压小一点 */
  padding: 10px 10px 10px !important;
}
.service-name{
  /* 再微调 1~2 像素的视觉上移 */
  margin-top: -3px !important;
}

/* === 安卓端再紧一点（如果你有 html.is-android 标识）=== */
html.is-android .service-info{
  padding: 3px 10px 8px !important;
}
html.is-android .service-name{
  margin-top: -2px !important;
}

/* === 超窄屏（≤360px）兜底，避免抖动与换行拉高 === */
@media (max-width: 360px){
  .service-info{
    padding: 3px 10px 8px !important;
  }
  .service-name{
    margin-top: -1px !important;
    line-height: 1.15; /* 名字两行时也更紧凑 */
  }
}


/* 名字固定单行，不换行不抖动（JS 已截断，这里兜底） */
.service-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === 编号胶囊更紧凑（统一生效）=== */
.service-id .num{
  display: inline-flex;           /* 垂直居中稳 */
  align-items: center;
  height: 20px;                   /* 固定高度（原来依赖 padding）*/
  padding: 0 6px !important;      /* 横向留白 */
  font-size: 11px !important;     /* 字体略小 */
  line-height: 1 !important;      /* 去掉行高撑高 */
  border-radius: 12px !important; /* 胶囊圆角随高度 */
}

/* 安卓常规屏再收一点点 */
html.is-android .service-id .num{
  height: 17px !important;
  padding: 0 5px !important;
  font-size: 10.5px !important;
}

/* 超窄屏（≤360px）兜底：避免撑高卡片 */
@media (max-width: 360px){
  .service-id .num{
    height: 16px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
  }
}


/* === 认证徽章统一 20px 高（SVG 与文字版）=== */

/* ① SVG 图片徽章：容器与图片统一高度，行高归零避免撑高 */
.service-id .badge-svg{
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  line-height: 0 !important;
  vertical-align: middle !important;  /* 与编号胶囊基线对齐 */
}
.service-id .badge-svg img{
  height: 20px !important;   /* 统一高度 */
  width: auto !important;    /* 保持原始宽高比 */
  display: block !important;
}

/* ② 文字版徽章：统一成 20px 胶囊风格，和编号胶囊一致 */
.service-id span.tag{
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;         /* 固定 20px */
  padding: 0 6px !important;       /* 横向留白 */
  font-size: 11px !important;      /* 和编号一致 */
  line-height: 1 !important;       /* 去掉行高撑高 */
  border-radius: 12px !important;  /* 跟随 20px 的圆角 */
  white-space: nowrap;             /* 防止自动换行拉高 */
}

/* （可选）安卓和 ≤360px 的屏幕再轻微收一点点 */
html.is-android .service-id span.tag{ height: 19px !important; padding: 0 5px !important; }
@media (max-width: 360px){
  .service-id span.tag{ height: 18px !important; padding: 0 5px !important; }
}

/* 放到 base.css 最后几行，覆盖更稳 */
.location .addr-svg{
  /* 变成灰色：去饱和 + 调亮度，确保在深色背景也清晰 */
  filter: grayscale(1) brightness(0.6) contrast(1.05);
  opacity: 0.95;             /* 可按需 0.8 ~ 1 调整 */
}

/* 可选：图标和文字都统一灰色语义 */
.location{ color:#9D9D9D; }
.location span{ color:#9D9D9D; }


/* 尽量把彩色/黑色图标洗成 #9D9D9D，近似值 */
.location .addr-svg{
  filter: grayscale(1) brightness(0) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg);
  opacity: .9;
}

/* =========================
 * 特点胶囊（卡片内）紧凑版覆盖
 * 放在 base.css 最底部，覆盖原有规则
 * ========================= */

/* 间距更紧凑 */
.tags{
  gap: 4px !important;
}

/* 胶囊更矮、更短、字体小一号；单行省略 */
.tags .tag{
  padding: 4px 7px !important;         /* 高度更矮、横向更短 */
  font-size: 11px !important;          /* 小一号 */
  line-height: 1.1 !important;         /* 贴一点，避免撑高 */
  border-radius: 12px !important;      /* 圆角随高度收一点 */
  max-width: 42% !important;           /* 限宽更短，避免把一行撑爆 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 安卓常规屏：再收一点点 */
html.is-android .tags .tag{
  padding: 2px 5px !important;
  font-size: 10.5px !important;
  max-width: 44% !important;
}

/* 超窄屏（≤360px）：继续收紧，确保两列不抖动 */
@media (max-width: 360px){
  .tags .tag{
    padding: 2px 5px !important;
    font-size: 10.5px !important;
    max-width: 45% !important;         /* 给字多的腾一丢丢空间 */
  }
}


/* ========== 资料卡片底部更紧凑（让底部边框“往上移”） ========== */

/* 1) 卡片底部内/外边距收紧 */
.service-card{
  padding-bottom: 2 !important;  /* 原 5px，贴近底边 */
  margin-bottom: 6px !important; /* 原 10px，列表更紧凑一点 */
}

/* 2) 信息区再压一点底部内边距，避免留白拉低视觉边框 */
.service-info{
  padding-bottom: 6px !important; /* 原 10px */
}

/* 3) 距离角标稍微上提，避免压住更靠上的底边 */
.service-card .distance{
  bottom: 3px !important;       /* 原 5px */
  border-radius: 0 5px 0 8px !important; /* 贴边时更自然 */
}

/* 4) 超窄屏再紧一点，防止两列卡片底部留白明显 */
@media (max-width: 360px){
  .service-card{ margin-bottom: 6px !important; }
  .service-info{ padding-bottom: 5px !important; }
  .service-card .distance{ bottom: 2px !important; }
}




/* ========== 资料卡片 · 名字大一号（含端内细调） ========== */
.service-name{
  font-size: 16px !important;   /* 默认从 16px → 18px */
  line-height: 1.2 !important;  /* 放大后更紧致 */
  margin-bottom: 4px !important;/* 保持行距稳 */
}

/* Android 常规屏略收一档，避免挤高卡片 */
html.is-android .service-name{
  font-size: 17px !important;
}

/* 超窄屏（≤360px）再收一丢丢，保证两列不抖动 */
@media (max-width: 360px){
  .service-name{ font-size: 17px !important; }
  html.is-android .service-name{ font-size: 16px !important; }
}


/* ========== 编号与认证整体下移（与名字拉开一点） ========== */
.service-name{
  margin-bottom: 7px !important;   /* 原 4~5px → 8px，先给名字留空 */
}
.service-id{
  margin-top: 6px !important;      /* 在名字下再垫一点间距 */
}

/* Android：略紧凑，避免卡片增高太多 */
html.is-android .service-name{ margin-bottom: 6px !important; }
html.is-android .service-id{   margin-top: 5px !important; }

/* ≤360px 超窄屏：再收一点，保证双列不抖动 */
@media (max-width: 360px){
  .service-name{ margin-bottom: 6px !important; }
  .service-id{   margin-top: 4px !important; }
}


/* ========== 卡片内“特点标签”上下间距加大（不影响筛选面板） ========== */
.service-card .tags{
  margin-top: 0px !important;     /* 原 5px → 10px */
  margin-bottom: 0px !important;  /* 新增：卡片信息区与下方留空 */
  gap: 6px !important;             /* 标签之间稍微松一点（原 4~5px） */
}

/* Android：略紧凑，避免卡片变高太多 */
html.is-android .service-card .tags{
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  gap: 5px !important;
}

/* ≤360px 超窄屏：再收一丢丢，确保双列不抖动 */
@media (max-width: 360px){
  .service-card .tags{
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    gap: 5px !important;
  }
}


/* 价格角标（右上）— 白底 + 深色文字 + 图标对齐 */
.price-tag {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #FFFFFF;     /* ✅ 改成白底 */
  color: #333;                   /* ✅ 文字深色 */
  padding: 3px 8px;
  border-radius: 0 0 0 10px;
  font-size: 12px;
  opacity: 1;                    /* ✅ 去掉半透明 */
  display: inline-flex;          /* ✅ 图标与文字水平对齐 */
  align-items: center;
  gap: 4px;
}

/* 新图标尺寸（可按需微调） */
.price-tag .icon-jgvs {
  width: 14px;
  height: 14px;
  display: block;
}

/* 旧的“钱包”配色不再需要，可保留不影响；如要彻底清掉可删除这行 */
/* .price-tag .qianbao{ color: #FBD97C; } */

/* 价格角标（右上）— 小一号 + 不换行 */
.price-tag{
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  padding: 2px 6px;          /* 原 3px 8px → 收紧 */
  border-radius: 0 0 0 10px;
  font-size: 11px;           /* 原 12px → 小一号 */
  font-weight: 600;          /* 略减粗，避免显大 */
  letter-spacing: 0;         /* 让“168P”更紧凑 */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;                  /* 图标与文字间距更小 */
  white-space: nowrap;       /* 避免极窄屏换行 */
}

/* 图标也缩一号，整体更精致 */
.price-tag .icon-jgvs{
  width: 12px;               /* 原 14px */
  height: 12px;
  display: block;
}

/* Android 更紧凑（含 ≤360px） */
html.is-android .price-tag{
  font-size: 10.5px;
  padding: 2px 5px;
  border-radius: 0 5px 0 10px;
}
@media (max-width: 360px){
  .price-tag{ font-size: 10.5px; padding: 2px 5px; }
}



/* ===== 统一收紧资料卡片圆角＋封面图一致 ===== */
:root{
  /* 你想要的“没那么圆”的程度：6~8px 很耐看 */
  --card-radius: 7px;
}

/* 卡片主体圆角变小，溢出裁切保持 */
.service-card{
  border-radius: var(--card-radius) !important;
  overflow: hidden !important; /* 确保内部元素跟随裁切 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可保留原阴影 */
}

/* 封面图圆角与卡片同步（避免出现不同弧度） */
.service-card .avatar img.cover{
  border-radius: var(--card-radius) !important;
}

/* 右上价格角标：底左角跟随卡片圆角 */
.price-tag{
  border-radius: 0 0 0 var(--card-radius) !important;
}

/* 左下距离角标：右上与左下跟随卡片圆角 */
.distance{
  border-radius: 0 var(--card-radius) 0 var(--card-radius) !important;
}

/* 可选：置顶角标不需要圆角，维持图形本体 */
.service-card .pin-badge-svg{
  /* 无需变更，如需更贴合也可保持不变 */
}

/* 可选：卡片内其他图片（若有）也跟卡片一致 */
.service-card img{
  border-radius: var(--card-radius);
}

/* === 价格角标 · 定位/高度/居中 · 最终覆盖版（贴在 base.css 最后）=== */
:root{
  /* 可按需微调 */
  --price-top-offset: -4px;      /* 距离卡片顶部：0=完全贴顶；2px=稍微往下 */
  --price-right-offset: -4px;    /* 距离右侧边缘 */
  --price-pad-y: 6px;           /* 上下内边距：数值越大越“厚” */
  --price-pad-x: 8px;           /* 左右内边距 */
  --price-font-size: 12px;      /* 字号 */
}

.price-tag{
  position: absolute !important;
  top: var(--price-top-offset) !important;    /* ✅ 微微下移 */
  right: var(--price-right-offset) !important;/* ✅ 依然贴右上角，可设 0 完全贴边 */
  z-index: 5 !important;

  display: inline-flex !important;            /* ✅ 水平垂直居中 */
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  padding: var(--price-pad-y) var(--price-pad-x) !important; /* ✅ 提升上下高度 */
  min-height: calc(2 * var(--price-pad-y) + 14px) !important;

  background: rgba(0,0,0,.55) !important;    /* ✅ 灰/深灰背景（半透明） */
  color: #fff !important;
  font-size: var(--price-font-size) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;

  border-radius: 0 0 0 var(--card-radius) !important; /* ✅ 左下角跟随卡片圆角 */
  box-shadow: none !important; /* 如需更凸显可改为 0 1px 2px rgba(0,0,0,.12) */
}

/* 图标尺寸与基线对齐：更稳更居中 */
.price-tag .icon-jgvs{
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  display: block !important;
}

/* 安卓更紧凑版（可选） */
html.is-android .price-tag{
  --price-top-offset: 2px;  /* 安卓也保持微下移 */
  --price-pad-y: 5px;       /* 稍微薄一点避免遮挡 */
  font-size: 11px !important;
}


/* ===== 价格角标 · 永远居中 & 抗大位移（最终覆盖版）===== */
:root{
  /* 可按需微调 */
  --price-top-offset: -5px;   /* 往上拉就调更负；0 = 贴顶 */
  --price-right-offset: -5px; /* 往右拉就调更负；0 = 贴右 */
  --price-height: 0px;       /* 角标“厚度”（高度）*/
  --price-minw: 4px;         /* 最小宽度，防止内容太挤 */
  --price-pad-x: 10px;        /* 左右内边距 */
  --price-font-size: 12px;    /* 字号 */
  --price-radius: var(--card-radius, 7px);
}

.price-tag{
  /* 定位与偏移：随便拉，内容都在中间 */
  position: absolute !important;
  top: var(--price-top-offset) !important;
  right: var(--price-right-offset) !important;
  z-index: 5 !important;

  /* 尺寸与排版：格子居中法 */
  display: grid !important;
  place-items: center !important;      /* ✅ 水平+垂直永远居中 */
  height: var(--price-height) !important;
  min-width: var(--price-minw) !important;
  padding: 0 var(--price-pad-x) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;

  /* 视觉：半透明深灰背景 + 白字 + 圆角跟随卡片 */
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-size: var(--price-font-size) !important;
  line-height: 1 !important;
  border-radius: 0 0 0 var(--price-radius) !important;

  /* 内容间距（图标与文字） */
  column-gap: 6px !important; /* grid 下用列间距更稳 */
  grid-auto-flow: column !important;   /* 图标-文字一行排 */
}

/* 图标尺寸与对齐：跟随居中 */
.price-tag .icon-jgvs{
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* 安卓端：更紧凑但依旧绝对居中 */
html.is-android .price-tag{
  --price-height: 26px;
  --price-minw: 50px;
  --price-pad-x: 8px;
  --price-font-size: 11px;
  --price-top-offset: 0px;    /* 也可设 2px，按你观感微调 */
}

/* ≤360px 超窄屏再收一点点 */
@media (max-width: 360px){
  .price-tag{
    --price-height: 26px;
    --price-minw: 50px;
    --price-pad-x: 8px;
    --price-font-size: 11px;
  }
}


/* ===== 价格角标 · 文字微下移 + 图标更贴近（最终覆盖）===== */
/* 你可以微调下面两个变量来控制“下移”和“间距” */
:root{
  --price-text-down: 2px;  /* 价格文字下移量（1~2px） */
  --price-gap-tight: 1px;    /* 图标与文字间距（越小越靠近） */
}

/* 角标容器维持你之前的居中与尺寸逻辑，这里只覆盖间距 */
.price-tag{
  /* 若你在上文用 grid： */
  column-gap: var(--price-gap-tight) !important;
  /* 若你在别处还是用了 flex，这里也同时收紧 */
  gap: var(--price-gap-tight) !important;
}

/* 图标尺寸保持不变（按需可再微调） */
.price-tag .icon-jgvs{
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* —— 文字微下移（尽量不用改 HTML）——
 * 1) 常见：价格文字包在 <span>/<b>/<strong> 里 → 精准下移
 * 2) 极端：文字是“裸文本节点” → 用万能选择器兜底，但不影响图片
 */
.price-tag :where(span, b, strong){
  display: inline-block !important;
  transform: translateY(var(--price-text-down)) !important;
}

/* 兜底：如果文字没有标签包裹，常见图标是 <img>，把“非图片”都轻微下移 */
.price-tag > :not(img):not(.icon-jgvs){
  transform: translateY(var(--price-text-down)) !important;
  display: inline-block !important;
}

/* 安卓端继续更紧凑（可选） */
html.is-android .price-tag{
  --price-gap-tight: 1.5px;
  --price-text-down: 1.6px;
}

/* 超窄屏（≤360px）再收一丢丢（可选） */
@media (max-width: 360px){
  .price-tag{
    --price-gap-tight: 1.5px;
    --price-text-down: 1.6px;
  }
}

/* ================================
 * A) 页面背景：可调“大小/位置”
 *    - --page-bg-size: cover | contain | 1200px auto | 100% 100% ...
 *    - --page-bg-pos : center top | right 10px top 20px | 30% 0 ...
 * =================================*/
:root{
  --page-bg-size: cover;     /* 背景大小 */
  --page-bg-pos: center top; /* 背景位置 */
}
body{
  background-size: var(--page-bg-size) !important;
  background-position: var(--page-bg-pos) !important;
}

/* ==================================
 * B) 价格角标：仅允许调背景“大小/位置”
 *    —— 不再让价格文字/图标做下移
 *    用变量调：位置/高度/左右内边距/最小宽
 * ==================================*/
:root{
  --price-top:   0px;   /* 角标距顶部 */
  --price-right: 0px;   /* 角标距右侧 */
  --price-h:     -15px;  /* 角标高度（背景厚度）*/
  --price-minw:  50px;  /* 角标最小宽度 */
  --price-padx:  2px;   /* 左右内边距 */
  --price-fs:    11px;  /* 字号 */
  --price-radius: var(--card-radius, 7px);
}

/* 角标容器：网格居中，不做 Y 方向位移 */
.price-tag{
  position: absolute !important;
  top: var(--price-top) !important;
  right: var(--price-right) !important;
  height: var(--price-h) !important;
  min-width: var(--price-minw) !important;
  padding: 0 var(--price-padx) !important;

  display: grid !important;
  place-items: center !important;
  grid-auto-flow: column !important;
  column-gap: 4px !important;

  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-size: var(--price-fs) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 0 0 0 var(--price-radius) !important;
  z-index: 5 !important;
}

/* 图标尺寸（不下移） */
.price-tag .icon-jgvs{
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* —— 关键：彻底取消之前的“下移”规则 —— */
.price-tag > *{ transform: none !important; }
.price-tag :where(span, b, strong){ transform: none !important; }
.price-tag > :not(img):not(.icon-jgvs){ transform: none !important; }

/* Android 可选更紧凑（不影响上下位置逻辑） */
html.is-android .price-tag{
  --price-h: 24px;
  --price-minw: 46px;
  --price-padx: 7px;
  --price-fs: 11px;
}

/* ================================
 * 距离角标（左下）— 跟价格角标同体系
 * 仅调背景的位置/大小，不下移文字/图标
 * ================================*/
:root{
  /* 可按需改数值：位置/高度/左右内边距/最小宽/字号 */
  --dist-bottom: 5px;     /* 角标距底部 */
  --dist-left:   0px;     /* 角标距左侧 */
  --dist-h:      20px;    /* 角标高度（背景厚度）*/
  --dist-minw:   50px;    /* 最小宽度 */
  --dist-padx:   8px;     /* 左右内边距 */
  --dist-fs:     12px;    /* 字号 */
}

/* 容器：左下固定 + 网格居中，风格与价格角标一致 */
.service-card .distance{
  position: absolute !important;
  bottom: var(--dist-bottom) !important;
  left: var(--dist-left) !important;
  height: var(--dist-h) !important;
  min-width: var(--dist-minw) !important;
  padding: 0 var(--dist-padx) !important;

  display: grid !important;
  place-items: center !important;       /* 水平+垂直永远居中 */
  grid-auto-flow: column !important;
  column-gap: 4px !important;

  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-size: var(--dist-fs) !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  /* 左下角跟卡片圆角一致（右上/左下都圆） */
  border-radius: 0 var(--card-radius) 0 var(--card-radius) !important;
  z-index: 5 !important;
  opacity: 1 !important;                /* 去掉半透明老规则 */
}

/* 图标尺寸：与价格角标统一，不做基线下移 */
.service-card .distance .jl{
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* 关键：彻底取消任何“下移文字”的旧规则 */
.service-card .distance > *{ transform: none !important; }
.service-card .distance :where(span, b, strong){ transform: none !important; }
.service-card .distance > :not(img):not(.jl){ transform: none !important; }

/* Android 更紧凑（可选） */
html.is-android .service-card .distance{
  --dist-h: 24px;
  --dist-minw: 46px;
  --dist-padx: 7px;
  --dist-fs: 11px;
}

/* ≤360px 更紧凑（可选） */
@media (max-width: 360px){
  .service-card .distance{
    --dist-h: 24px;
    --dist-minw: 46px;
    --dist-padx: 7px;
    --dist-fs: 11px;
  }
}



/* =========================
 * 卡片偶发“溢出容器”终极补丁（iOS/高倍屏）
 * 直接贴在 base.css 最后
 * ========================= */

/* 1) 网格列用 minmax(0,1fr) 防止子像素累计导致右侧超 1px */
.service-list{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  /* 某些内嵌 WebView 会出现横向滚动条，这里彻底关掉 */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* 2) 卡片自己“兜住一切”：裁剪 + 独立渲染层，避免阴影/角标外溢 */
.service-card{
  overflow: hidden !important;           /* 再次确保裁剪 */
  contain: layout paint size style;      /* 独立布局/绘制上下文，隔离子像素 */
  will-change: transform;                /* 提前上 GPU 避免抖动 */
  transform: translateZ(0);              /* 某些 WebView 需要这个 */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS 圆角裁剪更稳 */
}

/* 3) 封面图彻底消掉 0.5px 外溢（display:block + 统一半径） */
.service-card .avatar img.cover{
  display: block !important;
  width: 100% !important;
  border-radius: var(--card-radius) !important;
  image-rendering: -webkit-optimize-contrast;
}

/* 4) 角标不要负偏移，确保永远在卡片内被裁剪到 */
:root{
  --price-top-offset: 0px !important;
  --price-right-offset: 0px !important;
  --price-height: 26px !important;   /* 给足高度但不外溢 */
  --price-pad-x: 8px !important;

  --dist-bottom: 0px !important;
  --dist-left: 0px !important;
  --dist-h: 24px !important;
  --dist-padx: 8px !important;
}

/* 统一角标为“网格居中”且绝不往外推 */
.price-tag{
  position: absolute !important;
  top: var(--price-top-offset) !important;
  right: var(--price-right-offset) !important;
  height: var(--price-height) !important;
  min-width: 48px !important;
  padding: 0 var(--price-pad-x) !important;
  display: grid !important;
  place-items: center !important;
  grid-auto-flow: column !important;
  column-gap: 4px !important;
  border-radius: 0 0 0 var(--card-radius) !important;
}

.service-card .distance{
  position: absolute !important;
  bottom: var(--dist-bottom) !important;
  left: var(--dist-left) !important;
  height: var(--dist-h) !important;
  min-width: 46px !important;
  padding: 0 var(--dist-padx) !important;
  display: grid !important;
  place-items: center !important;
  grid-auto-flow: column !important;
  column-gap: 4px !important;
  border-radius: 0 var(--card-radius) 0 var(--card-radius) !important;
}

/* 5) 修正可能来自旧样式的负 margin/偏移（强力兜底） */
.price-tag, .service-card .distance, .service-card .pin-badge-svg{
  margin: 0 !important;
  /* 若早期样式给过 transform 位移，这里把它清零 */
  transform: none !important;
}

/* 6) iOS 安全区 + 全局横向禁止，彻底杜绝“探出边界” */
html, body{
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  padding-left: env(safe-area-inset-left, 0) !important;
  padding-right: env(safe-area-inset-right, 0) !important;
}

/* 7) 高倍屏 0.5px 边界毛边修正（可选） */
@supports (-webkit-touch-callout: none) {
  .service-card{
    /* iOS 特有的像素对齐微调，防止半像素阴影外溢 */
    outline: 1px solid transparent;
  }
}

/* === 修复卡片被压扁（移除 size containment）=== */
.service-card{
  contain: paint !important;         /* 或者：contain: layout paint; */
  /* 保留 overflow:hidden / will-change / translateZ(0) 都没问题 */
}

/* 顺手把一个无单位的声明补成 px，避免浏览器忽略 */
.service-card{
  padding-bottom: 2px !important;    /* 你现有代码里是 2（无单位），会被丢弃 */
}

/* =========================================================
 * 终极不越界 + 状态栏永不换行（贴在 base.css 最底部）
 * =======================================================*/

/* 0) 系统级“横向溢出保险丝” */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 1) 所有主要容器禁止把内容“探出屏外” */
.container,
.search-container,
.filter-buttons,
.filter-container,
.filter-dropdown,
.dropdown-container,
.area-drawer,
.service-list,
.service-card {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* 2) 所有媒体元素永远不超过屏宽 */
img, video, canvas, svg {
  max-width: 100% !important;
  height: auto;
}

/* 3) 网格列使用 minmax(0,1fr) 防止 0.5px 累积溢出 */
.service-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 4) 顶部「状态栏」：永远单行、禁止换行、可横向滑动 */
.filter-dropdown {
  display: flex !important;
  flex-wrap: nowrap !important;          /* ✅ 不换行 */
  overflow-x: auto !important;           /* ✅ 超出时横向滚动 */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;     /* ✅ iOS 惯性滑动 */
  gap: clamp(6px, 2vw, 10px) !important; /* ✅ 间距自动收放 */
  padding: 6px clamp(6px, 2vw, 12px) !important;
  scrollbar-width: none;                 /* Firefox 隐藏滚动条 */
}
.filter-dropdown::-webkit-scrollbar { display: none; } /* WebKit 隐藏滚动条 */

/* 5) 状态栏内每一项固定为“行内块”，不被压到下一行 */
.dropdown-item {
  flex: 0 0 auto !important;             /* ✅ 保持在同一行 */
  display: inline-flex !important;
  align-items: center;
  gap: clamp(6px, 1.8vw, 10px) !important;
  white-space: nowrap !important;        /* ✅ 文本不换行 */
}

/* 6) 标题/文本在窄屏自动“微缩”，但不至于太小 */
.dropdown-item .title,
.dropdown-item .title span,
.dropdown-item .name,
.dropdown-item select {
  font-size: clamp(12px, 3.3vw, 14px) !important; /* ✅ 自适应字号 */
  line-height: 1.2 !important;
}

/* 7) 若仍然过长，文本改为省略显示（不撑出容器） */
.dropdown-item .title,
.dropdown-item .name {
  max-width: 48vw;                         /* ✅ 单项最长不超半屏 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 8) 搜索区同理：单行不换行，极窄屏自动缩字 */
.search-container {
  overflow: hidden !important;
}
.search-container .search-bar {
  min-width: 0;                            /* 允许压缩 */
}
.search-container input {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: clamp(13px, 3.4vw, 14px) !important;
}

/* 9) 顶部分类按钮区域：网格四等分已启用，这里再防溢出 */
.filter-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow: hidden !important;
}
.filter-button {
  min-width: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
}

/* 10) 卡片内易溢出的文字统统省略号 + 禁止换行 */
.service-name,
.location,
.tags .tag,
.service-id .num,
.service-id .badge-svg,
.service-id span.tag {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* 11) 角标绝不越界（右上价签 / 左下距离） */
.price-tag,
.service-card .distance,
.service-card .pin-badge-svg {
  max-width: 100% !important;
  transform: none !important;
  margin: 0 !important;
  /* 统一在卡片内部裁切，避免负偏移推出边界 */
  position: absolute !important;
}
.price-tag {
  top: 0 !important;
  right: 0 !important;
}
.service-card .distance {
  left: 0 !important;
  bottom: 0 !important;
}

/* 12) 安卓超窄屏特护：状态栏更紧凑但仍不换行 */
@media (max-width: 360px) {
  html.is-android .filter-dropdown {
    gap: 6px !important;
    padding: 4px 6px !important;
  }
  html.is-android .dropdown-item {
    gap: 6px !important;
  }
  html.is-android .dropdown-item .title,
  html.is-android .dropdown-item .title span,
  html.is-android .dropdown-item .name,
  html.is-android .dropdown-item select {
    font-size: clamp(11.5px, 3.6vw, 13px) !important;
  }
}


/* ==== 弹层统一样式补丁（覆盖默认） ==== */
.dropdown-container{
  position: fixed;           /* 保证脱离文档流，不被 body 滚动影响 */
  left: 0; right: 0;
  max-height: 70vh;          /* 防止过长超出屏幕 */
  overflow: auto;
  background: #fff;          /* 避免“看起来像空白” */
  z-index: 1001;             /* 一定要高于遮罩 999 */
  display: none;             /* 默认隐藏，JS 再显示 */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-radius: 0 0 12px 12px;
  -webkit-overflow-scrolling: touch;
}

/* 距离面板容器（可选：细化标识） */
#distance-container.distance-container{
  z-index: 1002;             /* 进一步保证距离面板永远在最前 */
}

/* 遮罩保持在面板之下 */
#dropdown-mask.dropdown-mask{
  z-index: 999;
}

/* 联想下拉 给个背景和前景层级，避免“看不见” */
#place-suggest{
  background: #fff;
  z-index: 1003;             /* 在面板里的子层，确保盖住面板内其它元素 */
  position: relative;
}

/* 简单的空白态/列表项可见性优化（可选） */
.tips-item{padding:10px 12px;border-bottom:1px solid #f2f3f5}
.tips-item:last-child{border-bottom:none}


/* === 统一字号 · 最终覆盖补丁（请放在 base.css 最底部）=== */
:root{
  /* 分类四按钮文字大小（可按需微调）*/
  --cat-btn-fs: 15px;
  /* 状态栏（上海 / 全部 / 区名 / 下拉）统一字号 */
  --status-fs: 13px;
}

/* ① 顶部四个分类按钮放大 */
.filter-buttons .filter-button{
  font-size: var(--cat-btn-fs) !important;
  /* 仅文本放大，不改变其它配色与交互 */
}

/* ② 状态栏文本全部同字号（“上海”、“全部/区名”、下拉选择） */
.filter-dropdown,
.filter-dropdown .dropdown-item,
.filter-dropdown .dropdown-item .title,
.filter-dropdown .dropdown-item .title span,
.filter-dropdown .dropdown-item .name,
.filter-dropdown select{
  font-size: var(--status-fs) !important;
  line-height: 1.2 !important;
}

/* ③ 安卓与超窄屏也保持一致，不再被早前规则压小 */
html.is-android .filter-buttons .filter-button{
  font-size: var(--cat-btn-fs) !important;
}
html.is-android .filter-dropdown,
html.is-android .filter-dropdown .dropdown-item,
html.is-android .filter-dropdown .dropdown-item .title,
html.is-android .filter-dropdown .dropdown-item .title span,
html.is-android .filter-dropdown .dropdown-item .name,
html.is-android .filter-dropdown select{
  font-size: var(--status-fs) !important;
}
@media (max-width: 360px){
  .filter-buttons .filter-button{
    font-size: var(--cat-btn-fs) !important;
  }
  .filter-dropdown,
  .filter-dropdown .dropdown-item,
  .filter-dropdown .dropdown-item .title,
  .filter-dropdown .dropdown-item .title span,
  .filter-dropdown .dropdown-item .name,
  .filter-dropdown select{
    font-size: var(--status-fs) !important;
  }
}


/* =========================================================
 * 资料卡片 · 右上角价格角标（.price-tag）背景框 · 最终覆盖补丁
 * —— 放在 base.css 最底部 —— 
 * 你主要会改下面这些变量：
 *   1) --price-h       → 背景“高度”（上下厚度）
 *   2) --price-minw    → 背景“最小宽度”（左右长度的基线）
 *   3) --price-padx    → 左右内边距（会一起影响“宽度”）
 *   4) --price-fs      → 文字字号（可选）
 *   5) --price-icon    → 图标大小（可选）
 * =======================================================*/
:root{
  /* ====== 你常改的三件事 ====== */
  --price-h:    0px;  /* ← 高度（上下厚度）  推荐 20~26px */
  --price-minw: 0px;  /* ← 宽度基线（最小宽度） 推荐 42~56px */
  --price-padx: 4px;   /* ← 左右内边距（同时影响宽度） 推荐 4~8px */

  /* 可选：字体与图标（不想动就保持现值） */
  --price-fs:   11px;  /* 角标内文字大小 */
  --price-icon: 15px;  /* 图标边长 */

  /* 位置与圆角（通常不需要改） */
  --price-top:   0px;  /* 与卡片上边的距离 */
  --price-right: 0px;  /* 与卡片右边的距离 */
  --price-radius: var(--card-radius, 7px); /* 左下圆角跟卡片一致 */
}

/* ====== 右上价格角标：更小、更紧凑，但始终在卡片内 ====== */
.price-tag{
  position: absolute !important;
  top: var(--price-top) !important;
  right: var(--price-right) !important;

  /* —— 背景“尺寸” —— */
  height: var(--price-h) !important;                 /* 高度=上下厚度（你最常改） */
  min-width: var(--price-minw) !important;           /* 宽度=最小宽度（你最常改） */
  padding: 0 var(--price-padx) !important;           /* 宽度附加=左右内边距（你最常改） */

  /* 排版：始终水平+垂直居中，内容不换行 */
  display: grid !important;
  place-items: center !important;
  grid-auto-flow: column !important;
  column-gap: 4px !important;
  white-space: nowrap !important;

  /* 视觉：半透明深灰背景 + 白字；左下角跟卡片圆角 */
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-size: var(--price-fs) !important;
  line-height: 1 !important;
  border-radius: 0 0 0 var(--price-radius) !important;
  z-index: 5 !important;

  /* 清理历史样式的位移/阴影，确保“框变小”只按上面变量走 */
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 图标尺寸（保持与文字协调） */
.price-tag .icon-jgvs{
  width: var(--price-icon) !important;
  height: var(--price-icon) !important;
  display: block !important;
}

/* 兜底：把任何可能残留的“文字下移”类覆盖掉，避免错位 */
.price-tag > *{ transform: none !important; }
.price-tag :where(span,b,strong){ transform: none !important; }

/* ====== 安卓与超窄屏的更紧凑默认（按需保留） ====== */
html.is-android .price-tag{
  --price-h:    20px;  /* 高度再薄一点 */
  --price-minw: 44px;  /* 宽度再短一点 */
  --price-padx: 5px;   /* 左右再收一点 */
  --price-fs:   10.5px;
  --price-icon: 11px;
}
@media (max-width: 360px){
  .price-tag{
    --price-h:    20px;
    --price-minw: 44px;
    --price-padx: 5px;
    --price-fs:   10.5px;
    --price-icon: 11px;
  }
}


/* ===== 价格角标 · 字重最终覆盖（放在 base.css 最底部）===== */
:root{
  /* 如需更细，可把 400 改为 300（部分设备会回退为 Regular） */
  --price-fw: 550;
}

.price-tag{
  font-weight: var(--price-fw) !important;  /* 覆盖早先的 600/加粗 */
  letter-spacing: 0;                        /* 紧一点更显“纤细” */
}

/* 安卓端也保持一致（可选） */
html.is-android .price-tag{
  font-weight: var(--price-fw) !important;
}


/* ===== 价格角标 & 距离角标 · 背景统一加深（最终覆盖）===== */
.price-tag,
.service-card .distance{
  background: rgba(0, 0, 0, 0.5) !important;
}

/* ===== 距离角标 · 图标再小一号（最终覆盖）===== */
/* 默认尺寸：可按需把 11px 改成 10~12px 微调 */
:root{
  --dist-icon-size: 13px;
}

/* 安卓上更紧凑一点（可调） */
html.is-android{
  --dist-icon-size: 10.5px;
}

/* 超窄屏（≤360px）再小一丢丢（可调） */
@media (max-width: 360px){
  html.is-android{
    --dist-icon-size: 10px;
  }
}

/* 统一用变量控制实际尺寸，强制覆盖之前的 14px 设定 */
.service-card .distance .jl{
  width: var(--dist-icon-size) !important;
  height: var(--dist-icon-size) !important;
  display: block !important;
  /* 如果你想让文字更贴近图标，可解注下一行 */
  /* margin-right: 2px !important; */
}

/* 可选：图标与文字的间距略收紧（按需） */
.service-card .distance{
  column-gap: 3px !important;  /* 你之前是 4px */
}



/* ===== 价格角标 · 图标与数字更贴（最终覆盖）===== */
:root{
  /* 想再更近就把 1px 改成 0.5px 或 0 */
  --price-gap-tight: 1px;
}

.price-tag{
  /* 你前面有多处 column-gap / gap，这里统一压到最小 */
  column-gap: var(--price-gap-tight) !important;
  gap: var(--price-gap-tight) !important;
  letter-spacing: 0 !important;      /* 数字更紧凑 */
}

/* 清掉任何可能的内边距/外边距，防止“看起来还在撑距” */
.price-tag > *{
  margin: 0 !important;
  padding-inline: 0 !important;      /* 有些标签会有左右内边距 */
}

/* 图标不额外占缝隙 */
.price-tag .icon-jgvs{
  margin: 0 !important;
  /* 如果还是觉得有点远，可以解开下一行再微贴 1px */
  /* transform: translateX(-0.5px); */
}

/* 安卓与超窄屏也同一标准（可选：再更近一点点） */
html.is-android .price-tag{ --price-gap-tight: 0.5px; }
@media (max-width: 360px){
  .price-tag{ --price-gap-tight: 0.5px; }
}



/* ===== 状态栏整体上移（最终覆盖）===== */
/* 放在 base.css 最底部，确保覆盖前面所有 margin/padding 设定 */
:root{
  --status-nudge-y: 4px;          /* 调整量：负值=往上，正值=往下 */
  --status-top-gap: 4px;           /* 状态栏与上方区域的最小安全间距 */
}

/* 1) 直接把状态栏往上“挪” */
.filter-dropdown{
  margin-top: var(--status-nudge-y) !important;
}

/* 2) 同时把上方分类区与状态栏之间的距离略收紧，避免显得松散 */
.filter-buttons{
  /* 原来是：margin: 6px 8px var(--gap-filter-to-features); */
  margin-bottom: var(--status-top-gap) !important;
}

/* 3) 超窄屏与安卓再微调 1～2px，防止过度挤压视觉 */
@media (max-width: 360px){
  .filter-dropdown{ margin-top: calc(var(--status-nudge-y) - 1px) !important; }
  .filter-buttons{  margin-bottom: max(2px, calc(var(--status-top-gap) - 1px)) !important; }
}
html.is-android .filter-dropdown{
  margin-top: calc(var(--status-nudge-y) - 1px) !important;
}


/* =========================================================
 * 地址图标更小 + 基线更稳（最终覆盖补丁，贴在 base.css 最底部）
 * 可调参数：
 *   --addr-icon-size  图标边长
 *   --addr-icon-gap   图标与文字的间距
 *   --addr-icon-dy    文字基线微调（正值=图标略下沉）
 * =======================================================*/
:root{
  --addr-icon-size: 14px;   /* 默认从 ~14px → 12px，更精致 */
  --addr-icon-gap:  2px;    /* 与文字的间距 */
  --addr-icon-dy:   1px;    /* 基线微下移，数值 0~2 之间可微调 */
}

/* 主规则：适配 <img class="addr-svg"> / <svg class="addr-svg"> / iconfont */
.location .addr-svg,
.location img.addr-svg,
.location svg.addr-svg,
.location .icon-location,
.location i .iconfont,
.location i[class*="icon-"] {
  width:  var(--addr-icon-size) !important;
  height: var(--addr-icon-size) !important;
  flex: 0 0 var(--addr-icon-size) !important;
  display: inline-block !important;
  margin-right: var(--addr-icon-gap) !important;
  vertical-align: middle !important;
  transform: translateY(var(--addr-icon-dy)) !important; /* 让图标与文字更贴齐 */
}

/* 继续保留你之前的灰度/亮度处理，让图标语义保持“地址灰” */
.location .addr-svg,
.location img.addr-svg,
.location svg.addr-svg,
.location .icon-location,
.location i .iconfont {
  filter: grayscale(1) brightness(0) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg);
  opacity: .9;
}

/* 防止被父级的 font-size 影响图标排版高度 */
.location {
  line-height: 1.2 !important;
}

/* ANDROID 更紧凑（可按需微调） */
html.is-android{
  --addr-icon-size: 11px;
  --addr-icon-dy:   0.5px;
}

/* 超窄屏（≤360px）再小半号（不影响其它样式） */
@media (max-width: 360px){
  :root{ --addr-icon-size: 11px; }
}


/* ===== 资料卡片整体上移 · 贴近状态栏（最终覆盖补丁）===== */
:root{
  /* 上移量（推荐 6–14px 之间微调）*/
  --cards-nudge-up: 6px;
  /* 状态栏与卡片之间的最小安全间距 */
  --status-bottom-gap: 2px;
}

/* 压缩状态栏（筛选条）与列表之间的间距 */
.filter-container{
  margin-bottom: var(--status-bottom-gap) !important;
}

/* 让卡片整体往上贴一些（不影响下方内容与遮罩层层级） */
.service-list{
  margin-top: calc(-1 * var(--cards-nudge-up)) !important;
}

/* Android & 超窄屏：略再紧一点，视觉更贴合 */
html.is-android .service-list{
  margin-top: calc(-1 * (var(--cards-nudge-up) + 2px)) !important;
}
@media (max-width: 360px){
  .service-list{
    margin-top: calc(-1 * (var(--cards-nudge-up) + 2px)) !important;
  }
}


/* =========================================================
 * 卡片左右留白（两侧“贴边距离”）统一加大 · 最终覆盖
 * 放在 base.css 最底部
 * 可调参数：
 *   --cards-gutter-x        默认左右留白
 *   --cards-gutter-x-android  Android 默认
 *   --cards-gutter-x-narrow   超窄屏（≤360px）
 * =======================================================*/
:root{
  --cards-gutter-x: 8px;            /* 默认 18px（原来大多为 10px）*/
  --cards-gutter-x-android: 16px;    /* Android 稍紧凑 */
  --cards-gutter-x-narrow: 14px;     /* 极窄屏（≤360px） */
}

/* 基础：列表两侧留白加大（不改变列数与卡片间距） */
.service-list{
  padding-left:  var(--cards-gutter-x) !important;
  padding-right: var(--cards-gutter-x) !important;
}

/* Android 调整 */
html.is-android .service-list{
  padding-left:  var(--cards-gutter-x-android) !important;
  padding-right: var(--cards-gutter-x-android) !important;
}

/* 超窄屏（≤360px）再收一点，避免挤压内容 */
@media (max-width: 360px){
  .service-list{
    padding-left:  var(--cards-gutter-x-narrow) !important;
    padding-right: var(--cards-gutter-x-narrow) !important;
  }
}

/* 保险：保持不横向溢出（你前面已有，重复无害） */
.service-list{
  max-width: 100vw !important;
  overflow-x: hidden !important;
}


/* =========================================================
 * 卡片之间的间距更紧凑（不改变左右留白）
 * 放在 base.css 最底部；覆盖前面所有 gap 设置
 * =======================================================*/
:root{
  /* 你可以按需微调这两个变量 */
  --cards-gap-x: 8px;   /* 横向间距（列与列之间），原来常见是 10px */
  --cards-gap-y: 10px;   /* 纵向间距（行与行之间），原来常见是 8~10px */
}

/* 只改网格间距，不改两侧 padding（左右留白保持你当前设置） */
.service-list{
  column-gap: var(--cards-gap-x) !important;  /* 列间距 */
  row-gap:    var(--cards-gap-y) !important;  /* 行间距 */
  gap: var(--cards-gap-y) var(--cards-gap-x) !important; /* 兜底统一 */
}

/* 让行距由 grid 控制，避免卡片自身再额外撑高 */
.service-card{
  margin-bottom: 0 !important;
}

/* Android 与超窄屏再紧一点（可选） */
html.is-android .service-list{
  --cards-gap-x: 5px;
  --cards-gap-y: 5px;
}
@media (max-width: 360px){
  .service-list{
    --cards-gap-x: 5px;
    --cards-gap-y: 5px;
  }
}


/* 让 .left/.right 不再阻断网格，gap 直达卡片 */
.service-list .left,
.service-list .right{
  display: contents !important;
}

/* 统一用变量控制行距（随便改大小） */
:root{ --cards-gap-y: 16px !important; }

.service-list{
  row-gap: var(--cards-gap-y) !important;
  gap: var(--cards-gap-y) var(--cards-gap-x) !important;
}

/* 确保不被 margin 影响 */
.service-card{ margin-bottom: 0 !important; }


/* =========================================================
 * 卡片纵向间距 · 加大版（覆盖现有变量）
 * 贴在 base.css 最底部，确保生效
 * =======================================================*/
:root{
  /* 默认从 10px → 16px（你可改 14~18 之间微调） */
  --cards-gap-y: 7px !important;
}

/* Android 稍微克制一点，避免列表过长 */
html.is-android .service-list{
  --cards-gap-y: 12px !important;
}

/* 超窄屏（≤360px）再收一丢丢，保持双列不拥挤 */
@media (max-width: 360px){
  .service-list{
    --cards-gap-y: 12px !important;
  }
}

/* 绑定关系兜底（多数你已配好，这里再强覆盖一次） */
.service-list{
  row-gap: var(--cards-gap-y) !important;
  gap: var(--cards-gap-y) var(--cards-gap-x) !important;
}

/* 确保不被旧的 margin-bottom 抢权（你前面已清 0，这里稳一手） */
.service-card{
  margin-bottom: 0 !important;
}

/* =========================================================
 * Footer 导航图标放大 + 高度自适配（最终覆盖补丁）
 * 直接贴在 base.css 最底部即可生效
 * =======================================================*/
:root{
  --footer-h: 60px;                              /* 底栏高度（原 50px） */
  --footer-icon: 29px;                           /* 图标边长（原 20px） */
  --footer-fs: 12px;                             /* 文字字号 */
  --footer-pad-y: 6px;                           /* 底栏上下内边距 */
  --footer-safe-b: env(safe-area-inset-bottom);  /* iOS 安全区 */
}

/* 调整底栏高度与排版 */
.footer{
  height: var(--footer-h) !important;
  padding: var(--footer-pad-y) 5px calc(var(--footer-pad-y) + var(--footer-safe-b)) !important;
  font-size: var(--footer-fs) !important;
}

/* 图标变大：统一强制覆盖 */
.footer img{
  width: var(--footer-icon) !important;
  height: var(--footer-icon) !important;
  display: block;
}



/* 页面内容底部留白跟随底栏高度，避免被遮住 */
.container{
  margin-bottom: calc(var(--footer-h) + 16px + var(--footer-safe-b)) !important;
}

/* —— Android 更紧凑一档（可按需微调）—— */
html.is-android{
  --footer-h: 52px;
  --footer-icon: 22px;
}

/* —— 超窄屏（≤360px）再收半号，保持排版稳定 —— */
@media (max-width: 360px){
  :root{
    --footer-h: 52px;
    --footer-icon: 22px;
  }
}

/* =========================================================
 * Footer 导航：文字上移更贴近图标（不改变图标位置）
 * 放在 base.css 最底部
 * 可调参数：--footer-text-gap 数值越小越贴（建议 0~4px）
 * =======================================================*/
:root{
  --footer-text-gap: 1px;  /* 默认 2px；想更贴可设 1 或 0 */
}

.footer img{
  margin-bottom: var(--footer-text-gap) !important; /* 覆盖早先的 5px */
}

/* 安卓更紧凑半格（可选）*/
html.is-android .footer img{
  margin-bottom: max(0px, calc(var(--footer-text-gap) - 1px)) !important;
}



/* =========================================================
 * Footer 导航 · 图标+文字整体上移（不改 footer 定位/高度）
 * 放在 base.css 最底部
 * 可调参数：--footer-raise-y 数值越大越往上（建议 2~10px）
 * =======================================================*/
:root{
  --footer-raise-y: 6px;              /* 默认上移 6px */
}

/* 核心：把每个入口 <a> 的内容整体上移（transform 不影响点击面积）*/
.footer a{
  transform: translateY(calc(-1 * var(--footer-raise-y))) !important;
}

/* 安卓与超窄屏建议略收一点，避免显得过挤 */
html.is-android{
  --footer-raise-y: 5px;
}
@media (max-width: 360px){
  :root{
    --footer-raise-y: 5px;
  }
}

/* 若图标与文字间距也想更贴，可继续配合你已有的变量一起用 */
:root{
  --footer-text-gap: 1px;  /* 你之前已加，这里再次明确保持 */
}
.footer img{
  margin-bottom: var(--footer-text-gap) !important;
}


/* 收藏页 / 全局卡片整体上移幅度调节（覆盖前面的 6px） */
:root{
  --cards-nudge-up: 14px;  /* 原来是 6px，先试 12，看感觉再调 10 / 14 */
}

/* === 洋酒页：搜索框与“上海”状态栏距离缩小 === */

/* 调整：搜索区域下边距稍微收一点 */
.search-container{
  /* 保持原来的上边距 8px，两侧 10px，只把底部从 8px → 4px */
  margin: var(--search-block-margin-y) 10px 4px !important;
}

/* 调整：分类按钮整体再贴紧一点（从 6px → 2px） */
:root{
  --search-filter-gap-top: 1px;   /* 想再更紧可以改成 1 或 0 */
}
.filter-buttons{
  /* 只改顶部的间距，底部仍然用你前面设的 --status-top-gap */
  margin-top: var(--search-filter-gap-top) !important;
}


/* ============================================
 * 顶部整体下移微调补丁（放在 base.css 最底部）
 * - 四个分类按钮往下
 * - 「上海 / 全部 / 区名」状态栏往下
 * - 下面的资料卡片整体也往下
 * ========================================== */
:root{
  /* 搜索框 → 四个分类按钮：中间缝隙稍微大一点 */
  --search-filter-gap-top: 4px;   /* 想更远就调大，比如 10 / 12 */

  /* 四个分类按钮 → 状态栏（上海那一行）的间距 */
  --status-top-gap: 4px;          /* 原来比较紧，这里拉开一点 */

  /* 状态栏本身的下移量 */
  --status-nudge-y: 4px;          /* 数值越大，状态栏越往下 */

  /* 取消之前把卡片整体往上拉太多的设置 */
  --cards-nudge-up: 0px;
}

/* 四个大分类按钮：离搜索框远一点、下面留一点空间给状态栏 */
.search-container{
  /* 上 维持原样，左右 10px，只调“底部”间距 */
  margin: var(--search-block-margin-y) 10px 8px !important;
}
.filter-buttons{
  /* 顶部缝隙用上面的变量，底部给状态栏一点呼吸空间 */
  margin-top:  var(--search-filter-gap-top) !important;
  margin-bottom: var(--status-top-gap) !important;
}

/* 「上海 / 全部 / 区名」这一条状态栏：整体下移一点 */
.filter-dropdown{
  margin-top: var(--status-nudge-y) !important;
}

/* 资料卡片：不再向上“负 margin”顶太紧，保持从状态栏下面自然开始 */
.service-list{
  margin-top: 0 !important;
}

/* 状态栏（上海这一行） 到 卡片列表之间的距离微调 */
:root{
  --status-bottom-gap: -4px !important;  /* 想大一点就改 12 / 14，都行 */
}

/* =========================================================
 * 顶部状态栏（上海 / 全部 / 区名）与卡片列表的间距 · 最终版
 * 通过 --status-bottom-gap 统一控制：
 *   - 默认：所有页面通用
 *   - page-home：首页单独一档
 *   - page-wine：洋酒页单独一档
 * =======================================================*/

/* 全站默认间距（比如 6px，看起来比较自然） */
:root{
  --status-bottom-gap: 6px;   /* 通用默认间距 */
}

/* 首页：想更紧一点，就调小 */
body.page-home{
  --status-bottom-gap: 4px;   /* 首页：状态栏离卡片更近一些 */
}

/* 洋酒页：想离“上海”更远一点，就调大 */
body.page-wine{
  --status-bottom-gap: 0px;  /* 洋酒页：卡片比首页拉开一点 */
  /* 你可以根据肉眼感觉改成 8 / 12 / 14 都行 */
}

/* 真正控制间距的地方：状态栏下面到卡片列表上面 */
.filter-container{
  margin-bottom: var(--status-bottom-gap) !important;
}

/* 防止前面老规则再乱拉 service-list */
.service-list{
  margin-top: 0 !important;
}

/* === 筛选弹层：去掉内容上方那条灰色背景，只保留下方遮罩 === */
.dropdown-mask::before{
  content: none !important;
  display: none !important;
  background: transparent !important;
}



/* =========================================================
 * 地址联想列表 · 分隔线 + 全黑字体（最终覆盖）
 * =======================================================*/

/* 联想结果整体外框 */
#place-suggest{
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid #e5e5e5 !important;  /* 外边框一圈淡灰 */
  overflow: auto !important;
}

/* 每一条结果：上下有内边距，底部一条线隔开 */
.tips-item{
  padding: 8px 12px !important;
  border-bottom: 1px solid #e5e5e5 !important;  /* 像图2那样的分隔线 */
  cursor: pointer;
  font-size: 13px !important;
  color: #000 !important;                      /* 字体默认黑色 */
  background: #fff !important;
}

/* 最后一条不要底部线 */
.tips-item:last-child{
  border-bottom: none !important;
}

/* 里面所有文字都统一黑色，防止被旧样式染成灰/黄 */
.tips-item *,
.tips-item .name{
  color: #000 !important;
}


/* =========================================================
 * 地址联想列表 · 一条一条有分隔线 + 全黑文字（强制版）
 * 放在 base.css 最底部
 * =======================================================*/

/* 整个联想列表外观 */
#place-suggest{
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid #e5e5e5 !important;
  overflow: auto !important;
  max-height: 50vh !important;
}

/* 如果里面有 ul，先把默认缩进和小圆点干掉 */
#place-suggest ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ 关键：不管子元素是 div / li / p，统统用这一条规则 */
#place-suggest > *,
#place-suggest ul > *{
  padding: 8px 12px !important;
  border-bottom: 1px solid #e5e5e5 !important;  /* 每条之间用线隔开 */
  font-size: 13px !important;
  color: #000 !important;                        /* 字体统一黑色 */
  background: #fff !important;
  cursor: pointer;
}

/* 最后一条不要底部线 */
#place-suggest > *:last-child,
#place-suggest ul > *:last-child{
  border-bottom: none !important;
}

/* 再兜一层：里面所有文字都用黑色，防止被旧样式染色 */
#place-suggest,
#place-suggest *{
  color: #000 !important;
}


/* =========================================================
 * 筛选遮罩仅作为视觉背景，不再拦截滑动/点击
 * =======================================================*/


/* 确保真正的弹层照常可点、可滚 */
.dropdown-container{
  pointer-events: auto !important;
}

.dropdown-mask{
  pointer-events: auto !important;
}

/* =========================================================
 * 全局滚动锁定：body 加 .scroll-locked 时，背景彻底不能滑
 * =======================================================*/
html.scroll-locked,
body.scroll-locked{
  overflow: hidden !important;
  height: 100% !important;
}

/* iOS / WebView 兜底：防止横向、竖向都乱滚 */
html.scroll-locked{
  position: relative;
}

/* 弹层本身继续可滚（你前面已经有 overflow: auto，这里强调一下） */
.dropdown-container{
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;  /* iOS 惯性滑动 */
}

/* 地区列表 / 标签列表 / 距离面板内部可滚 */
.area-list,
.tags-container,
.distance-panel{
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  padding: 0;
  background-color: #EFEEF3;
  background: linear-gradient(168deg, #FCF1FB 0%, #FFDED4 50.64%, #F9D2FF 99.39%);
  background-repeat: no-repeat;
  /* 去掉这一行：
  background-attachment: fixed;
  */
  background-size: cover;
  -ms-overflow-style: none;
}


/* =========================================================
 * 距离面板底部间距 & 按钮下移微调
 * =======================================================*/

/* 只针对“距离”这一个弹层，减小底部留白 */
#distance-container.dropdown-container{
  padding-bottom: 20px !important;   /* 原来通用是 20px，这里减小一点 */
}

/* 距离面板里的“重置 / 确定” 按钮整体往下挪一点 */
#distance-container .distance-actions{
  margin-top: 18px !important;      /* 往下移：数值越大越靠下 */
}


/* =========================================================
 * 洋酒页（body.page-wine）顶部整体上移
 * - 只影响洋酒页，不动首页
 * =======================================================*/


/* =========================================================
 * 洋酒页（page-wine）专属：状态栏和资料卡片整体上移
 * - 首页 / 其他页面不受影响
 * =======================================================*/

/* 1）洋酒页：搜索框下面的间距缩小一点 */
body.page-wine .search-container{
  /* 只改“底部”这一个值，保持你全局的上/左右不变 */
  margin-bottom: 10px !important;   /* 想更近可以改成 2 或 0 */
}

/* 2）洋酒页：筛选状态栏（上海 / 全部 / 区名）整体往上贴一点 */
body.page-wine .filter-dropdown{
  margin-top: 0 !important;        /* 全局是 4px，这里拉回到 0 */
}

/* 3）洋酒页：状态栏与资料卡片之间的缝隙再压一压 */
body.page-wine .filter-container{
  margin-bottom: 2px !important;   /* 默认是用 --status-bottom-gap，这里单独收紧 */
}

/* 4）洋酒页：卡片整体再往上挪一点点，和状态栏更贴近 */
body.page-wine .service-list{
  margin-top: -4px !important;     /* 想再贴一点就改 -6 / -8，看眼缘 */
}



/* =========================================================
 * 距离面板里「获取位置」按钮胶囊放大一档
 * —— 放在 base.css 最底部 —— 
 * =======================================================*/

/* 按钮本体：胶囊更大，高度更厚，字体略大一点 */
.distance-panel .btn-locate{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;          /* ← 左右 & 上下空间都加大 */
  min-height: 30px;           /* ← 胶囊高度（原来如果偏小，这里统一抬高） */
  border-radius: 999px;       /* ← 真·胶囊弧度 */
  font-size: 13px;            /* ← 比周围文字略大半号 */
  gap: 4px;                   /* 图标与文字间距 */

  /* 如果之前有边框/背景，保留也行；你想统一风格可以用下面两行： */
  /* background: #F7F8FC;
     border: 1px solid #E5E5E5; */
}

/* 图标也跟着稍微放大一点，并保证垂直居中 */
.distance-panel .btn-locate img,
.distance-panel .btn-locate svg{
  width: 16px;
  height: 16px;
  display: block;
}


/* =========================================================
 * 上海地区弹层：确认 / 重置按钮整体下移一点
 * 只影响「上海」地区筛选弹窗，不动其它弹层
 * =======================================================*/
#area-container .area-actions,
.area-container .area-actions{
  margin-top: 4px !important;   /* 往下移的距离，想再低一点就改大一点 */
}

/* =========================
 * 上海地区弹窗底部按钮条：去掉顶部那条分割线
 * 只影响「上海地区」筛选弹窗
 * ========================= */
#area-container .area-actions,
.area-container .area-actions{
  border-top: none !important;
}



/* === 安卓资料卡片左右更靠边（减小左右留白） === */
html.is-android{
  --cards-gutter-x-android: 6px;   /* 想更靠边可以改成 6 */
}

/* === 底部导航文字强制一行，不允许换行 === */
.footer a span{
  white-space: nowrap !important;
}



/* =========================================================
 * ANDROID · 资料卡片封面改成正方形（仅安卓生效）
 * =======================================================*/
html.is-android .service-card .avatar img.cover{
  width: 100% !important;
  height: auto !important;          /* 先让浏览器按宽度算 */
  aspect-ratio: 1 / 1 !important;   /* 强制 1:1 正方形 */
  object-fit: cover !important;     /* 居中裁剪，保证好看 */
  display: block !important;
}




/* =========================================================
 * Footer 导航：四个按钮始终一排 + 文本单行
 * =======================================================*/
.footer{
  display: flex !important;
  flex-wrap: nowrap !important;          /* 不允许换行 */
  justify-content: space-around !important;
  align-items: center !important;
}

/* 每个入口平均分配宽度，避免因为 padding 太大而折行或溢出 */
.footer a{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  padding: 4px 0 2px !important;         /* 去掉左右 32px 的大 padding */
}

/* 图标 + 文字垂直方向保持紧凑 */
.footer img{
  display: block;
  margin-bottom: var(--footer-text-gap, 1px) !important;
}

/* 文本必须单行显示，太长就用省略号 */
.footer a span{
  display: block;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* =========================================================
 * Footer 导航四个图标统一尺寸（首页/洋酒/收藏/群组）
 * 放在 base.css 最底部，作为最终覆盖
 * =======================================================*/
:root{
  /* 这里就是你想要的图标大小，按视觉调：22~30px 都可以 */
  --footer-icon-final: 26px;
}

.footer img{
  width: var(--footer-icon-final) !important;
  height: var(--footer-icon-final) !important;
  display: block;
  object-fit: contain;              /* 保证不被强行拉伸变形 */
}

/* 文字保持单行省略，防止挤到两行导致高度看起来不一致 */
.footer a span{
  display: block;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* =========================================================
 * 全局底部安全留白 · 防止内容被固定 footer 遮挡（最终兜底）
 * =======================================================*/

/* 统一一个“页面底部安全距离”变量 */
:root{
  /* 
   * 说明：
   * - var(--footer-h, 52px)：底部导航高度，读取你前面设置的 --footer-h，
   *   没取到时默认 52px
   * - 24px：额外加一点空隙，防止不同机型/浏览器计算误差
   * - env(safe-area-inset-bottom, 0)：iOS 刘海机底部安全区
   */
  --page-safe-bottom: calc(
    var(--footer-h, 52px) + 24px + env(safe-area-inset-bottom, 0px)
  );
}

/* 1) 给 body 兜一个大底：所有页面都预留出 footer 的高度 */
body{
  padding-bottom: var(--page-safe-bottom) !important;
}

/* 2) 把之前对 .container 的 margin-bottom 统一收口，避免重复叠加奇怪效果 */
.container{
  margin-bottom: 0 !important;
}


/* =========================================================
 * 底部导航 · 全页面统一最终版
 * - 永远吸底
 * - 四个图标等大、等高、对称
 * - 干掉所有 transform / 各页小偏移
 * =======================================================*/

/* 可以按自己喜好微调这几个参数的数值 */
:root{
  --footer-h: 56px;                          /* 底部导航总高度 */
  --footer-icon: 26px;                       /* 图标边长 */
  --footer-fs: 12px;                         /* 文案字号 */
  --footer-safe-b: env(safe-area-inset-bottom, 0px);
}

/* 1) 导航条：永远固定在页面最底部 */
.footer{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: var(--footer-h) !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-around !important;
  align-items: center !important;

  padding: 4px 0 calc(4px + var(--footer-safe-b)) !important;
  z-index: 800 !important;
}

/* 2) 每个按钮平均分宽度，禁止各种奇怪的上移/下移 */
.footer a{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;   /* ★ 清掉之前所有 translateY 调整 */
}

/* 3) 图标统一大小，四个页面完全一致 */
.footer img{
  width: var(--footer-icon) !important;
  height: var(--footer-icon) !important;
  display: block;
  margin-bottom: 2px !important;
}

/* 4) 文案单行、省略号，防止挤成两行导致看起来不对称 */
.footer a span{
  display: block;
  font-size: var(--footer-fs) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 5) 内容区域统一给 footer 腾出空间，避免最后一屏被遮住 */
body{
  padding-bottom: calc(var(--footer-h) + 12px + var(--footer-safe-b)) !important;
}



:root{
  --footer-h: 56px;
  --footer-icon: 26px;
  --footer-fs: 12px;
  --footer-safe-b: env(safe-area-inset-bottom, 0px);
}

.footer{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: var(--footer-h) !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-around !important;
  align-items: center !important;

  padding: 4px 0 calc(4px + var(--footer-safe-b)) !important;
  z-index: 800 !important;
}

.footer a{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.footer img{
  width: var(--footer-icon) !important;
  height: var(--footer-icon) !important;
  display: block;
  margin-bottom: 2px !important;
}

.footer a span{
  display: block;
  font-size: var(--footer-fs) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body{
  padding-bottom: calc(var(--footer-h) + 12px + var(--footer-safe-b)) !important;
}