html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  -webkit-tap-highlight-color: transparent;
  background: #e8eef8;
}
.life {
  min-height: 100%;
  padding: 0 0 0.32rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 812' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23b7cdf5'/%3E%3Cstop offset='32%25' stop-color='%23d4e2f8'/%3E%3Cstop offset='68%25' stop-color='%23e8eef8'/%3E%3Cstop offset='100%25' stop-color='%23eef1f8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='375' height='812' fill='url(%23bg)'/%3E%3Ccircle cx='310' cy='36' r='80' fill='%230c42af' fill-opacity='.08'/%3E%3Ccircle cx='36' cy='110' r='56' fill='%233d7cff' fill-opacity='.08'/%3E%3Cpath d='M250 70h12v36h-12zm16-16h14v52h-14zm18 10h11v42h-11z' fill='%230c42af' fill-opacity='.06'/%3E%3C/svg%3E") no-repeat top/100% 100%;
}
.banner {
  padding: calc(env(safe-area-inset-top) + 0.1rem) 0 0;
}
.head { padding: 0.02rem 0.16rem 0.08rem; }
.head h1 {
  margin: 0;
  font-size: 0.2rem;
  font-weight: 800;
  color: #12204a;
  letter-spacing: 0.01rem;
  line-height: 1.2;
}
.head i {
  display: block;
  width: 0.22rem;
  height: 0.03rem;
  margin-top: 0.06rem;
  border-radius: 0.03rem;
  background: linear-gradient(90deg, #0c42af, #7ea6ff);
}
.stick {
  z-index: 20;
  padding: 0 0.12rem 0.1rem;
}
.panel {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 0.14rem;
  box-shadow: 0 0.08rem 0.24rem rgba(18, 32, 74, 0.06);
}
.stick.is-fixed .panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 21;
  border-radius: 0;
  box-shadow: 0 0.04rem 0.16rem rgba(18, 32, 74, 0.08);
}
.panel.open {
  border-radius: 0.14rem 0.14rem 0 0;
  box-shadow: none;
}
.sf-bar {
  display: flex;
  height: 0.48rem;
  align-items: center;
}
.sf-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 0.13rem;
  font-weight: 600;
  color: #4a5168;
  padding: 0 0.12rem;
  position: relative;
  gap: 0.08rem;
}
.sf-item + .sf-item::before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  height: 0.12rem;
  background: #e6eaf2;
}
.sf-item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 1.4rem;
}
.sf-item::after {
  content: '';
  position: static;
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-top: 0.02rem;
  border: 0.05rem solid transparent;
  border-top-color: #b4bbcb;
  transform: none;
}
.sf-item.active { color: #0c42af; }
.sf-item.active::after { border-top-color: #0c42af; }
.sf-drop {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.48rem;
  max-height: 55vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 0 0 0.14rem 0.14rem;
  box-shadow: 0 0.1rem 0.24rem rgba(18, 32, 74, 0.08);
  z-index: 22;
}
.sf-drop.show { display: block; }
.sf-opt {
  padding: 0.14rem 0.2rem;
  font-size: 0.14rem;
  color: #2a3148;
  border-bottom: 1px solid #f0f2f7;
}
.sf-opt.active {
  background: #f3f6ff;
  color: #0c42af;
  font-weight: 600;
}
.mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18, 32, 74, 0.28);
  z-index: 19;
}
.mask.show { display: block; }
.list { padding: 0.12rem 0.12rem 0; }
.empty {
  padding: 0.6rem 0;
  text-align: center;
  color: #969799;
  font-size: 0.14rem;
}
.empty svg { display: block; margin: 0 auto 0.12rem; width: 0.8rem; height: 0.8rem; }
.tip {
  color: #a0a6b8;
  font-size: 0.12rem;
  padding: 0.16rem 0 0.08rem;
  text-align: center;
}
.store {
  display: flex;
  padding: 0.12rem;
  margin-bottom: 0.12rem;
  background: #fff;
  border-radius: 0.18rem;
  box-shadow: 0 0.1rem 0.28rem rgba(18, 32, 74, 0.06);
}
.store__cover {
  position: relative;
  width: 0.96rem;
  height: 0.96rem;
  flex-shrink: 0;
  margin-right: 0.12rem;
  border-radius: 0.14rem;
  overflow: hidden;
  background: #eef1f8;
}
.store__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.store__status {
  position: absolute;
  left: 0.06rem;
  bottom: 0.06rem;
  height: 0.18rem;
  padding: 0 0.06rem;
  border-radius: 0.09rem;
  background: rgba(12, 66, 175, 0.88);
  color: #fff;
  font-size: 0.1rem;
  font-weight: 600;
  line-height: 0.18rem;
}
.store__body { flex: 1; min-width: 0; }
.store__row { display: flex; align-items: center; gap: 0.08rem; }
.store__row h3 {
  flex: 1;
  margin: 0;
  font-size: 0.16rem;
  font-weight: 700;
  color: #12204a;
  line-height: 0.22rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.store__dist {
  flex-shrink: 0;
  font-size: 0.11rem;
  font-weight: 600;
  color: #0c42af;
  background: #edf2ff;
  height: 0.2rem;
  line-height: 0.2rem;
  padding: 0 0.08rem;
  border-radius: 0.1rem;
}
.store__tags { display: flex; flex-wrap: wrap; gap: 0.06rem; margin-top: 0.08rem; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 0.18rem;
  padding: 0 0.07rem;
  border-radius: 0.09rem;
  font-size: 0.1rem;
  font-weight: 600;
}
.tag--orange { background: #fff4e5; color: #fa8c16; }
.tag--red { background: #fff1f0; color: #f53f3f; }
.tag--green { background: #edf9ee; color: #2db347; }
.store__mid {
  display: flex;
  align-items: flex-end;
  gap: 0.08rem;
  margin-top: 0.08rem;
}
.store__info { flex: 1; min-width: 0; }
.store__map {
  flex-shrink: 0;
  width: 0.36rem;
  height: 0.36rem;
  padding: 0;
  border: 0;
  border-radius: 0.08rem;
  background: transparent;
  line-height: 0;
}
.store__map svg { width: 0.36rem; height: 0.36rem; }
.store__map * { pointer-events: none; }
.store__meta {
  display: flex;
  align-items: center;
  margin: 0.05rem 0 0;
  font-size: 0.12rem;
  color: #8b90a0;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.store__meta svg {
  flex-shrink: 0;
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 0.04rem;
}
