:root {
  --ink: #17191f;
  --muted: #747986;
  --line: #eceef2;
  --canvas: #fbf7f7;
  --orange: #c90000;
  --brand-deep: #9c0000;
  --brand-red: #c90000;
  --brand-soft: #fff0f0;
  --surface: #fff;
  --radius: 14px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas)
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--canvas);
  min-width: 320px
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer
}

img {
  display: block;
  object-fit: cover
}

svg {
  width: 1em;
  height: 1em;
  stroke-width: 1.8
}

.page {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background: var(--canvas);
  padding-bottom: 28px
}

.home {
  background: linear-gradient(180deg, #fff 0 330px, var(--canvas) 330px)
}

.home-head,
.list-head {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px
}

.location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 650
}

.location svg {
  color: var(--orange);
  width: 17px;
  height: 17px
}

.location svg:last-child {
  color: #9da1aa;
  width: 13px;
  height: 13px
}

.head-link,
.rule-button {
  font-size: 13px;
  color: #5c626f
}

.welcome {
  padding: 12px 18px 18px
}

.welcome p,
.section-line p {
  margin: 0 0 5px;
  color: #8b909a;
  font: 600 10px/1.2 ui-sans-serif;
  letter-spacing: .08em
}

.welcome h1 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-wrap: balance
}

.welcome>span {
  display: block;
  margin-top: 9px;
  color: #676d78;
  font-size: 13px;
  line-height: 1.5
}

.primary-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 0 12px 18px;
  background: #fff
}

.nav-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff
}

.nav-icon svg {
  width: 22px;
  height: 22px
}

.nav-icon.food {
  background: #ff7d24
}

.nav-icon.nearby {
  background: #ff9b1d
}

.nav-icon.hotel {
  background: #4b89e8
}

.nav-icon.travel {
  background: #2eb784
}

.nav-icon.taxi {
  background: #6f6ce9
}

.nav-item strong {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap
}

.nav-item small {
  color: #9297a1;
  font-size: 10px;
  white-space: nowrap
}

.context-card {
  margin: 16px 14px 0;
  min-height: 145px;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  background: #202a32;
  color: #fff;
  display: flex
}

.context-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 21, 27, .92) 0%, rgba(15, 21, 27, .6) 53%, rgba(15, 21, 27, .04) 100%)
}

.context-card>div {
  z-index: 1;
  padding: 20px;
  width: 69%
}

.context-kicker {
  color: #ffbd91;
  font-size: 11px;
  font-weight: 650
}

.context-card h2 {
  margin: 9px 0 5px;
  font-size: 20px;
  line-height: 1.25;
  text-wrap: balance
}

.context-card p {
  margin: 0;
  color: #d6d9dd;
  font-size: 12px;
  line-height: 1.5
}

.context-card button {
  margin-top: 14px;
  color: #fff;
  background: var(--orange);
  border-radius: 18px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 650
}

.context-card b {
  font-size: 17px;
  vertical-align: -1px;
  line-height: 0
}

.context-card img {
  position: absolute;
  right: 0;
  width: 58%;
  height: 100%
}

.benefits,
.recommend {
  padding: 24px 14px 0
}

.section-line {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px
}

.section-line h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.015em
}

.section-line button {
  font-size: 12px;
  color: #737985
}

.benefit-row {
  display: flex;
  gap: 10px;
  overflow: auto;
  scrollbar-width: none;
  padding-bottom: 2px
}

.benefit-row::-webkit-scrollbar {
  display: none
}

.benefit-card {
  flex: 0 0 82%;
  min-height: 92px;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: #fff;
  position: relative;
  overflow: hidden
}

.benefit-card:after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  right: -29px;
  top: -34px
}

.benefit-card.orange {
  background: #e86730
}

.benefit-card.red {
  background: #d94a46
}

.benefit-card div,
.benefit-card button {
  z-index: 1
}

.benefit-card span,
.benefit-card small {
  display: block;
  font-size: 11px;
  opacity: .83
}

.benefit-card strong {
  display: block;
  margin: 5px 0 4px;
  font-size: 16px;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.benefit-card button {
  color: #c94824;
  background: #fff;
  border-radius: 15px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700
}

.service-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 14px 0
}

.service-strip button {
  text-align: left;
  padding: 11px 9px;
  background: #fff;
  border-radius: 12px
}

.service-strip strong,
.service-strip small {
  display: block
}

.service-strip strong {
  font-size: 12px;
  margin-top: 7px
}

.service-strip small {
  font-size: 10px;
  margin-top: 3px;
  color: #818792
}

.mini-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px
}

.mini-icon svg {
  width: 15px;
  height: 15px
}

.mini-icon.blue {
  color: #3a7be0;
  background: #eaf3ff
}

.mini-icon.green {
  color: #189a6e;
  background: #e8f7f1
}

.mini-icon.purple {
  color: #615bd4;
  background: #f0efff
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden
}

.product-card>img {
  width: 100%;
  height: 118px
}

.product-card>div {
  padding: 10px
}

.result-tag {
  display: inline-block;
  background: #fff1e9;
  color: #d84f19;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 10px;
  line-height: 1
}

.product-card h3 {
  height: 36px;
  margin: 7px 0 2px;
  font-size: 13px;
  line-height: 1.38;
  overflow: hidden
}

.product-card p {
  margin: 0;
  color: #818792;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.reward {
  display: inline-block;
  margin-top: 7px;
  color: #e2491b;
  background: #fff2eb;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 10px;
  font-weight: 650
}

.card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px
}

.card-price {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 4px;
  line-height: 1.05
}

.card-price .price {
  flex: 0 0 auto
}

.card-price del {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.price {
  color: #ec3f19;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em
}

.price i {
  font-size: 12px;
  font-style: normal;
  margin-right: 1px
}

.card-bottom button,
.result-bottom button {
  background: #fff0e8;
  color: #e64e1c;
  border-radius: 14px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700
}

.card-bottom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-height: 30px;
  flex: 0 0 50px;
  padding: 0 8px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap
}

.result-bottom del {
  color: #999;
  font-size: 11px;
  margin-left: 5px;
}

.product-card del,
.detail-price del {
  font-size: 10px;
  color: #9ba0aa;
  margin-left: 3px
}

.simple-price {
  font-size: 13px;
  font-weight: 700;
  color: #30343b
}

.empty-inline {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 16px
}

.empty-inline>span {
  color: #f06e38;
  font-size: 24px
}

.empty-inline svg {
  width: 24px;
  height: 24px
}

.empty-inline strong {
  font-size: 13px
}

.empty-inline p {
  margin: 4px 0 0;
  font-size: 11px;
  color: #7e8490
}

.empty-inline button {
  margin-left: auto;
  color: #e24c1c;
  font-size: 12px;
  white-space: nowrap
}

.list-page {
  background: #fff
}

.list-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255, 255, 255, .97)
}

.back,
.photo-back {
  font-size: 31px;
  line-height: 1;
  color: #1d2027;
  width: 30px;
  text-align: left
}

.list-head>div {
  flex: 1
}

.list-head h1 {
  margin: 0;
  font-size: 17px
}

.list-head p {
  width: 70vw;
  margin: 3px 0 0;
  font-size: 10px;
  overflow: hidden;
  white-space: normal;
  text-align: left;
  color: #8b909a
}

.location-dot {
  color: var(--orange);
  font-size: 20px;
  width: 31px
}

.channel-tabs {
  display: flex;
  gap: 22px;
  overflow: auto;
  padding: 4px 18px 12px;
  border-bottom: 1px solid #f0f1f3;
  scrollbar-width: none
}

.channel-tabs::-webkit-scrollbar {
  display: none
}

.channel-tabs button {
  white-space: nowrap;
  font-size: 14px;
  color: #767c87;
  padding: 6px 0;
  position: relative
}

.channel-tabs .active {
  color: #17191f;
  font-weight: 750
}

.channel-tabs .active:after {
  content: "";
  position: absolute;
  width: 17px;
  height: 3px;
  border-radius: 3px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange)
}

.intent-wrap {
  padding: 12px 14px 6px
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px
}

.intent {
  min-width: 0;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: #f7f8fa;
  border-radius: 10px;
  padding: 8px 3px 7px;
  font-size: 11px;
  color: #525964;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.intent .intent-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 9px;
  font-size: 17px;
  line-height: 1
}

.intent .intent-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.intent.selected {
  background: #fff0e9;
  color: #d84f19;
  font-weight: 700
}

.sort-row {
  display: flex;
  gap: 8px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid #f1f2f4
}

.sort-row button {
  border-radius: 14px;
  padding: 6px 10px;
  background: #f6f7f9;
  font-size: 11px;
  color: #6f7580
}

.sort-row .active {
  background: #25282e;
  color: #fff
}

.list-summary {
  display: flex;
  justify-content: space-between;
  padding: 14px 14px 8px;
  color: #3e434d;
  font-size: 13px;
  font-weight: 650
}

.list-summary small {
  font-size: 10px;
  color: #9499a2;
  font-weight: 400
}

.result-list {
  padding: 0 14px 22px
}

.result-card {
  display: flex;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f1f3
}

.result-card>img {
  width: 112px;
  height: 91px;
  border-radius: 10px;
  flex: 0 0 auto
}

.result-copy {
  min-width: 0;
  flex: 1
}

.result-copy h2 {
  font-size: 14px;
  line-height: 1.35;
  margin: 6px 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.result-copy p {
  margin: 0;
  color: #808691;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.result-copy p i {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #b4b8c0;
  border-radius: 50%;
  margin: 0 6px 2px
}

.result-copy .reward {
  margin-top: 5px
}

.result-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 7px
}

.result-bottom .price {
  font-size: 18px
}

.empty-state {
  padding: 55px 20px;
  text-align: center
}

.empty-state>span {
  display: block;
  color: #ff7a42
}

.empty-state svg {
  width: 39px;
  height: 39px
}

.empty-state h2 {
  font-size: 16px;
  margin: 13px 0 7px
}

.empty-state p {
  font-size: 12px;
  color: #777d88;
  margin: 0 auto;
  line-height: 1.55;
  max-width: 230px
}

.empty-state button {
  margin-top: 17px;
  background: var(--orange);
  color: #fff;
  border-radius: 18px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 650
}

.skeleton {
  height: 108px;
  border-radius: 10px;
  margin: 12px 0;
  background: linear-gradient(100deg, #f1f2f4, #f8f8f9, #f1f2f4);
  background-size: 220% 100%;
  animation: shimmer 1.35s infinite linear
}

.coupon-page {
  background: #fff;
  min-height: 100vh
}

.coupon-intro {
  display: flex;
  gap: 12px;
  margin: 9px 14px 16px;
  padding: 16px;
  background: #fff3ee;
  border-radius: 12px;
  color: #54271b
}

.coupon-intro>span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: #ff6731;
  border-radius: 10px;
  color: #fff
}

.coupon-intro svg {
  width: 19px;
  height: 19px
}

.coupon-intro h2 {
  margin: 0;
  font-size: 16px
}

.coupon-intro p {
  margin: 5px 0 0;
  font-size: 11px;
  color: #8a5a4b
}

.coupon-list {
  padding: 0 14px
}

.coupon-list .benefit-card {
  width: 100%;
  margin-bottom: 10px;
  min-height: 105px
}

.detail-page {
  background: #fff;
  padding-bottom: 84px
}

.detail-photo {
  height: 280px;
  position: relative;
  background: #edeff1
}

.detail-photo>img {
  width: 100%;
  height: 100%
}

.photo-back {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  text-align: center;
  line-height: 31px
}

.detail-content {
  padding: 17px 16px
}

.detail-content h1 {
  margin: 9px 0 7px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.018em
}

.detail-shop {
  margin: 0;
  color: #7f858f;
  font-size: 12px
}

.detail-price {
  margin: 15px 0;
  color: #e3431a
}

.detail-price .price {
  font-size: 30px
}

.reward-detail {
  margin: 15px 0;
  padding: 13px 14px;
  background: #fff4ed;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.reward-detail span {
  display: block;
  font-size: 11px;
  color: #8f5b46
}

.reward-detail strong {
  display: block;
  margin-top: 3px;
  color: #e14219;
  font-size: 24px
}

.reward-detail p {
  margin: 0;
  color: #92624e;
  font-size: 10px;
  line-height: 1.65;
  text-align: right
}

.detail-note {
  border-top: 1px solid #eff0f2;
  padding-top: 16px
}

.detail-note h2,
.related h2 {
  font-size: 15px;
  margin: 0
}

.detail-note p {
  font-size: 12px;
  color: #747a85;
  line-height: 1.65;
  margin: 8px 0
}

.related {
  margin-top: 25px
}

.related-row {
  display: flex;
  gap: 10px;
  overflow: auto
}

.related-row button {
  flex: 0 0 140px;
  text-align: left
}

.related-row img {
  width: 140px;
  height: 91px;
  border-radius: 10px
}

.related-row span {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.related-row .reward {
  margin-top: 5px
}

.detail-footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, 540px);
  height: 68px;
  padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #edf0f2;
  display: flex;
  gap: 10px;
  z-index: 4
}

.detail-save {
  width: 76px;
  background: #f5f6f8;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650
}

.detail-buy {
  flex: 1;
  background: var(--orange);
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 750
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translate(-50%, 14px);
  background: rgba(25, 28, 33, .92);
  color: #fff;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
  z-index: 8;
  max-width: 82vw;
  text-align: center
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

@keyframes shimmer {
  to {
    background-position: -220% 0
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
}

@media(min-width:541px) {
  body {
    background: #e9ebef
  }

  .page {
    box-shadow: 0 0 0 1px #e7e8eb
  }

  .detail-footer {
    box-shadow: 0 -1px #e7e8eb
  }
}

.home-search {
  height: 38px;
  margin: 0 14px 14px;
  width: calc(100% - 28px);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border-radius: 10px;
  background: #f4f5f7;
  color: #818792;
  font-size: 12px
}

.home-search svg {
  width: 16px;
  height: 16px;
  color: #69707c
}

.primary-nav {
  grid-template-columns: repeat(4, 1fr);
  row-gap: 15px;
  padding-bottom: 19px
}

.nav-icon.bill {
  background: #8559e6
}

.nav-icon.coffee {
  background: #a66c43
}

.nav-icon.hotpot {
  background: #dd4d38
}

.activity-search {
  margin: 0 14px 16px;
  padding: 12px;
  background: #f6f7f9;
  border-radius: 12px
}

.activity-search>div {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: #fff;
  border-radius: 9px
}

.activity-search>div span {
  display: grid;
  color: #737985
}

.activity-search svg {
  width: 16px;
  height: 16px
}

.activity-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: 12px "PingFang SC", "Microsoft YaHei", sans-serif
}

.activity-search input::placeholder {
  color: #9aa0a9
}

.activity-search>div button {
  color: #e34c1b;
  font-size: 12px;
  font-weight: 700
}

.activity-search nav {
  display: flex;
  gap: 18px;
  margin: 12px 2px 8px
}

.activity-search nav button {
  font-size: 12px;
  color: #717781
}

.activity-search nav .active {
  color: #202329;
  font-weight: 750;
  position: relative
}

.activity-search nav .active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: #ff5a1f
}

.activity-search p {
  margin: 0;
  color: #8c919b;
  font-size: 11px
}

.activity-search p button {
  margin-left: 8px;
  color: #cf4a20;
  font-size: 11px
}

.coupon-feature {
  padding-top: 22px
}

.coupon-hero {
  min-height: 168px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #d82f16;
  color: #fff
}

.coupon-hero>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.coupon-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(154, 22, 11, .9) 0%, rgba(214, 38, 17, .68) 46%, rgba(220, 61, 27, .06) 100%)
}

.coupon-hero-copy {
  position: relative;
  z-index: 1;
  padding: 18px 17px;
  width: 67%
}

.coupon-hero-copy>span {
  display: inline-block;
  padding: 4px 6px;
  background: rgba(255, 255, 255, .16);
  border-radius: 4px;
  font-size: 10px
}

.coupon-hero-copy h2 {
  margin: 10px 0 4px;
  font-size: 20px;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -.02em
}

.coupon-hero-copy h2 b {
  font-size: 30px;
  letter-spacing: -.04em
}

.coupon-hero-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 11px;
  line-height: 1.45
}

.coupon-hero-copy button {
  margin-top: 12px;
  padding: 8px 14px;
  background: #fff;
  color: #d53b1d;
  border-radius: 17px;
  font-size: 12px;
  font-weight: 750
}

.coupon-secondary {
  width: 100%;
  height: 49px;
  margin-top: 9px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: #fff;
  border-radius: 10px
}

.coupon-secondary span {
  display: inline-block;
  padding: 4px 6px;
  background: #fff1e9;
  border-radius: 4px;
  color: #d75228;
  font-size: 10px
}

.coupon-secondary strong {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.coupon-secondary i {
  color: #e14a1c;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap
}

.flash-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0 14px 7px;
  padding: 8px 10px;
  background: #fff8ed;
  border-radius: 8px;
  color: #9a6a37;
  font-size: 10px;
  line-height: 1.45
}

.flash-note svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px
}

.store-hint,
.store-detail-hint {
  display: block;
  margin-top: 5px;
  color: #8d939c;
  font-size: 10px;
  line-height: 1.35
}

.store-detail-hint {
  margin: 15px 0;
  padding: 11px 12px;
  background: #fff8ed;
  border-radius: 8px;
  color: #936d45
}

.flash-store-card .result-bottom {
  margin-top: 9px
}

.list-search {
  margin: 0 14px 11px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 10px;
  background: #f4f5f7
}

.list-search>span {
  color: #707782;
  display: grid
}

.list-search>span svg {
  width: 17px;
  height: 17px
}

.list-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #22252c;
  font: 13px "PingFang SC", "Microsoft YaHei", sans-serif
}

.list-search input::placeholder {
  color: #9499a3
}

.list-search button:first-of-type {
  width: 18px;
  color: #9297a2;
  font-size: 20px;
  line-height: 1
}

.list-search button:last-child {
  color: #e24d1d;
  font-size: 12px;
  font-weight: 700
}

.category-zone {
  padding: 0 14px 8px
}

.zone-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 0 10px
}

.zone-title h2 {
  margin: 0;
  font-size: 15px
}

.zone-title button {
  color: #777e88;
  font-size: 11px
}

.search-mode-note {
  margin: 3px 0 0;
  color: #8a9099;
  font-size: 10px;
  line-height: 1.35
}

.filter-row {
  height: 47px;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0 14px;
  border-top: 1px solid #f1f2f4;
  border-bottom: 1px solid #f1f2f4;
  overflow: auto;
  scrollbar-width: none
}

.filter-row::-webkit-scrollbar {
  display: none
}

.filter-row button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 7px;
  color: #555b65;
  font-size: 11px
}

.filter-row button svg {
  width: 11px;
  height: 11px
}

.filter-row .chosen {
  color: #dc4b1b;
  font-weight: 700
}

.sort-row {
  padding-top: 8px
}

.list-summary>div {
  display: flex;
  align-items: center;
  gap: 8px
}

.list-summary button {
  color: #e44d1b;
  font-size: 11px;
  font-weight: 650
}

.filter-sheet[hidden] {
  display: none
}

.filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 7
}

.sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 24, .42)
}

.sheet-card {
  position: absolute;
  bottom: 0;
  left: 0;
  /* transform: translateX(-50%); */
  /* width: min(100%, 540px); */
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 16px 16px 0 0
}

.sheet-card header {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sheet-card h2 {
  margin: 0;
  font-size: 17px
}

.sheet-card header button {
  color: #e54d1c;
  font-size: 13px;
  font-weight: 700
}

.sheet-card p {
  margin: 7px 0 13px;
  color: #818791;
  font-size: 11px
}

.sheet-card>div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.sheet-card>div button {
  padding: 9px 14px;
  background: #f5f6f8;
  border-radius: 8px;
  color: #5e646e;
  font-size: 12px
}

.sheet-card>div button.active {
  background: #fff0e9;
  color: #dc4b1a;
  font-weight: 700
}

.saved-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #5c626f
}

.saved-link svg {
  width: 15px;
  height: 15px;
  color: #e56c2d
}

.saved-link span {
  font-size: 12px
}

.smart-plan {
  padding: 22px 14px 0
}

.smart-plan .section-line {
  margin-bottom: 10px
}

.smart-plan .section-line p {
  margin: 4px 0 0;
  color: #8c919a;
  letter-spacing: 0;
  font-size: 11px
}

.smart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px
}

.smart-actions>button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 9px;
  background: #fff;
  border-radius: 12px;
  text-align: left
}

.plan-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 9px
}

.plan-icon svg {
  width: 16px;
  height: 16px
}

.plan-icon.orange {
  color: #e34c1c;
  background: #fff0e8
}

.plan-icon.blue {
  color: #3675d6;
  background: #eaf2ff
}

.smart-actions>button>span:nth-child(2) {
  min-width: 0;
  flex: 1
}

.smart-actions strong,
.smart-actions small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.smart-actions strong {
  font-size: 12px
}

.smart-actions small {
  margin-top: 3px;
  color: #818792;
  font-size: 10px
}

.smart-actions b {
  color: #9ca1aa;
  font-size: 18px;
  font-weight: 400
}

.continue-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 28px);
  margin: 15px 14px 0;
  padding: 10px 12px;
  background: #fff;
  border-radius: 12px;
  text-align: left
}

.continue-bar>img,
.continue-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px
}

.continue-icon {
  display: grid;
  place-items: center;
  color: #d95625;
  background: #fff1ea
}

.continue-icon svg {
  width: 16px;
  height: 16px
}

.continue-bar>span {
  min-width: 0;
  flex: 1
}

.continue-bar strong,
.continue-bar small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.continue-bar strong {
  font-size: 12px
}

.continue-bar small {
  margin-top: 3px;
  color: #818792;
  font-size: 10px
}

.continue-bar>b {
  color: #de4c1d;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap
}

.saved-page {
  background: #fff;
  min-height: 100vh
}

.saved-section {
  padding: 17px 14px 0
}

.saved-section+.saved-section {
  margin-top: 13px;
  padding-top: 20px;
  border-top: 8px solid #f5f6f8
}

.saved-section .section-line {
  margin-bottom: 10px
}

.saved-section .section-line h2 {
  font-size: 16px
}

.saved-section .section-line button {
  color: #8a9099;
  font-size: 11px
}

.saved-list {
  background: #fff
}

.saved-card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 26px 10px 0;
  border-bottom: 1px solid #eff0f2
}

.saved-card>img {
  width: 58px;
  height: 58px;
  border-radius: 9px;
  flex: 0 0 auto
}

.saved-main {
  min-width: 0;
  flex: 1;
  text-align: left
}

.saved-main .result-tag {
  margin-bottom: 5px
}

.saved-main strong,
.saved-main small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.saved-main strong {
  font-size: 13px;
  line-height: 1.35
}

.saved-main small {
  margin-top: 4px;
  color: #858b95;
  font-size: 11px
}

.saved-remove {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: #a1a6ae;
  font-size: 20px;
  line-height: 20px
}

.saved-empty {
  padding: 25px 10px 29px;
  text-align: center;
  color: #777d87
}

.saved-empty>span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 9px;
  border-radius: 10px;
  background: #f5f6f8;
  color: #a1a6ae
}

.saved-empty svg {
  width: 18px;
  height: 18px
}

.saved-empty strong {
  display: block;
  color: #424750;
  font-size: 13px
}

.saved-empty p {
  max-width: 250px;
  margin: 7px auto 0;
  font-size: 11px;
  line-height: 1.55
}

.saved-empty button {
  margin-top: 12px;
  padding: 7px 11px;
  border-radius: 15px;
  background: #fff0e8;
  color: #df4d1d;
  font-size: 11px;
  font-weight: 700
}

.detail-save.saved {
  background: #fff0e8;
  color: #df4d1d
}

.home {
  background: linear-gradient(180deg, #fff 0 592px, var(--canvas) 592px)
}

.home .welcome {
  padding-bottom: 13px
}

.home .welcome h1 {
  font-size: 24px
}

.home .coupon-feature {
  padding: 3px 14px 0
}

.home .coupon-feature .section-line {
  margin-bottom: 9px
}

.home .coupon-feature .section-line h2 {
  font-size: 17px
}

.home .coupon-hero {
  min-height: 182px;
  border-radius: 15px
}

.home .coupon-hero-copy {
  padding: 19px 17px;
  width: 69%
}

.home .coupon-hero-copy h2 {
  font-size: 22px
}

.home .coupon-hero-copy h2 b {
  font-size: 33px
}

.service-entry {
  margin-top: 18px;
  padding: 17px 14px 15px;
  background: #fff
}

.entry-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 15px
}

.entry-heading h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.015em
}

.entry-heading p {
  margin: 5px 0 0;
  color: #858b95;
  font-size: 11px
}

.entry-heading button {
  color: #e24c1c;
  font-size: 11px;
  font-weight: 650
}

.primary-nav-main {
  grid-template-columns: repeat(5, 1fr);
  padding: 0;
  background: transparent;
  gap: 0
}

.primary-nav-main .nav-item {
  gap: 6px
}

.primary-nav-main .nav-icon {
  width: 43px;
  height: 43px
}

.primary-nav-main .nav-item strong {
  font-size: 12px
}

.quick-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 17px
}

.quick-nav>button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 7px;
  background: #f6f7f9;
  border-radius: 10px;
  text-align: left
}

.quick-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px
}

.quick-icon svg {
  width: 14px;
  height: 14px
}

.quick-icon.coffee {
  color: #8d5934;
  background: #f2e8de
}

.quick-icon.hotpot {
  color: #d94631;
  background: #feeae6
}

.quick-icon.bill {
  color: #6556d4;
  background: #eeecff
}

.quick-nav strong {
  min-width: 0;
  flex: 1;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.quick-nav b {
  color: #8f959f;
  font-size: 16px;
  font-weight: 400
}

.scene-spotlight {
  padding: 23px 14px 0
}

.scene-spotlight .section-line {
  margin-bottom: 11px
}

.scene-spotlight .section-line h2 {
  font-size: 18px
}

.scene-layout {
  display: grid;
  grid-template-columns: 1.13fr .87fr;
  gap: 9px;
  min-height: 142px
}

.scene-lead {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  text-align: left;
  color: #fff
}

.scene-lead>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.scene-lead:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 24, 31, .82) 0%, rgba(18, 24, 31, .08) 100%)
}

.scene-lead>div {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 9px;
  bottom: 12px
}

.scene-lead span,
.scene-lead strong,
.scene-lead small {
  display: block
}

.scene-lead span {
  font-size: 10px;
  color: #ffcfad
}

.scene-lead strong {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.25
}

.scene-lead small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .82);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.scene-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 9px
}

.scene-tile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px;
  background: #fff;
  border-radius: 11px;
  text-align: left
}

.scene-tile>span:nth-child(2) {
  min-width: 0;
  flex: 1
}

.scene-tile strong,
.scene-tile small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.scene-tile strong {
  font-size: 12px
}

.scene-tile small {
  margin-top: 3px;
  color: #858b94;
  font-size: 10px
}

.scene-tile>b {
  color: #9ba0a9;
  font-size: 16px;
  font-weight: 400
}

.hotel-tile .mini-icon {
  background: #eaf3ff
}

.travel-tile .mini-icon {
  background: #e8f7f1
}

.home .recommend {
  padding-top: 23px
}

.home .continue-bar {
  margin-top: 19px;
  margin-bottom: 7px
}

.home-search {
  height: 42px
}

.coupon-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 82px;
  padding: 14px;
  background: #fff2eb;
  border-radius: 13px;
  text-align: left
}

.coupon-fallback .mini-icon {
  flex: 0 0 auto;
  width: 35px;
  height: 35px
}

.coupon-fallback .mini-icon.orange {
  background: #ff6531;
  color: #fff
}

.coupon-fallback>span:nth-child(2) {
  min-width: 0;
  flex: 1
}

.coupon-fallback strong,
.coupon-fallback small {
  display: block
}

.coupon-fallback strong {
  font-size: 14px
}

.coupon-fallback small {
  margin-top: 4px;
  color: #8b5a48;
  font-size: 11px
}

.coupon-fallback>b {
  color: #db4b1c;
  font-size: 11px;
  white-space: nowrap
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff
}

.brand-mark img {
  display: block;
  max-width: none
}

.brand-mark em {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid #fff;
  border-radius: 6px;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(37, 39, 44, .16)
}

.brand-main {
  width: 43px;
  height: 43px;
  border-radius: 13px
}

.brand-quick {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px
}

.brand-food {
  background: #fff1e9
}

.brand-food img {
  width: 33px;
  height: 33px;
  object-fit: contain
}

.brand-combo {
  background: #fff6e8
}

.brand-combo .combo-flash {
  width: 31px;
  height: 31px;
  object-fit: contain;
  transform: translate(-3px, 3px)
}

.brand-combo .combo-meituan {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #fff;
  border-radius: 7px;
  object-fit: contain;
  box-shadow: 0 1px 3px rgba(46, 35, 3, .18)
}

.brand-nearby,
.brand-hotel,
.brand-travel,
.brand-hotpot {
  background: #ffd100
}

.brand-nearby img,
.brand-hotel img,
.brand-travel img,
.brand-hotpot img {
  width: 30px;
  height: 30px;
  object-fit: contain
}

.brand-nearby em {
  background: #e65b28
}

.brand-hotel em {
  background: #4984da
}

.brand-travel em {
  background: #23a978
}

.brand-taxi {
  background: #fff2eb
}

.brand-taxi img {
  position: absolute;
  height: 130px;
  width: auto;
  left: -18px;
  top: -44px
}

.brand-coffee {
  background: #ecf5f1
}

.brand-coffee img {
  width: 19px;
  height: 19px;
  object-fit: contain
}

.brand-bill {
  background: #e9f2ff
}

.brand-bill img {
  width: 18px;
  height: 18px;
  object-fit: contain
}

.brand-quick.brand-food img {
  width: 22px;
  height: 22px
}

.brand-quick.brand-combo .combo-flash {
  width: 20px;
  height: 20px;
  transform: translate(-2px, 2px)
}

.brand-quick.brand-combo .combo-meituan {
  width: 12px;
  height: 12px;
  border-width: 1px;
  border-radius: 4px
}

.brand-quick.brand-nearby img,
.brand-quick.brand-hotel img,
.brand-quick.brand-travel img,
.brand-quick.brand-hotpot img {
  width: 18px;
  height: 18px
}

.brand-quick .brand-mark em {
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-radius: 4px;
  font-size: 7px
}

.brand-quick.brand-taxi img {
  height: 86px;
  left: -12px;
  top: -30px
}

.quick-nav .brand-mark+strong {
  min-width: 0;
  flex: 1
}

.quick-icon {
  display: none
}

.quick-nav .is-coming {
  opacity: .52;
  cursor: default
}

.quick-nav .is-coming i {
  color: #969ba4;
  font-size: 9px;
  font-style: normal;
  white-space: nowrap
}

.service-entry {
  margin: 18px 14px 0;
  padding: 16px;
  border-radius: 16px;
  background: #f6f7f9
}

.entry-heading {
  margin-bottom: 12px
}

.entry-heading h2 {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em
}

.entry-heading p {
  margin-top: 5px;
  color: #626a76;
  font-size: 12px;
  font-weight: 500
}

.entry-heading button {
  padding: 7px 9px;
  border-radius: 14px;
  background: #fff0e9;
  color: #d9471a;
  font-size: 11px;
  font-weight: 750
}

.primary-nav-main {
  gap: 6px
}

.primary-nav-main .nav-item {
  min-width: 0;
  min-height: 82px;
  padding: 9px 2px 8px;
  border-radius: 12px;
  background: #fff;
  gap: 5px;
  justify-content: center
}

.primary-nav-main .nav-item strong {
  max-width: 100%;
  color: #24282f;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap
}

.primary-nav-main .brand-main {
  width: 44px;
  height: 44px
}

.primary-nav-main .nav-food {
  background: #ff5b2a;
  color: #fff
}

.primary-nav-main .nav-food strong {
  color: #fff
}

.primary-nav-main .nav-food .brand-combo {
  background: #fff
}

.primary-nav-main .nav-nearby {
  background: #fff9df
}

.primary-nav-main .nav-hotel {
  background: #eff6ff
}

.primary-nav-main .nav-travel {
  background: #ecf8f1
}

.primary-nav-main .nav-taxi {
  background: #fff3ea
}

.quick-nav {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e6e8eb
}

.quick-nav>button {
  background: #fff
}

.home .scene-spotlight {
  padding-top: 20px
}

.skeleton-shimmer {
  background: linear-gradient(100deg, #eceff3 25%, #f8f9fb 44%, #eceff3 63%);
  background-size: 260% 100%;
  animation: shimmer 1.15s linear infinite
}

.loading-note {
  margin: 5px 0 12px;
  color: #757c87;
  font-size: 11px;
  text-align: center
}

.home-skeleton {
  min-height: 100vh;
  padding: 18px 14px 28px;
  background: #fff
}

.skeleton-bar {
  width: 82px;
  height: 16px;
  border-radius: 6px
}

.skeleton-copy {
  padding: 26px 0 16px
}

.skeleton-line {
  display: block;
  height: 11px;
  border-radius: 5px
}

.skeleton-line+.skeleton-line {
  margin-top: 10px
}

.skeleton-line.short {
  width: 28%
}

.skeleton-line.medium {
  width: 56%
}

.skeleton-line.title {
  width: 72%;
  height: 25px
}

.skeleton-search {
  height: 42px;
  border-radius: 10px
}

.skeleton-section {
  padding-top: 22px
}

.skeleton-heading {
  width: 92px;
  height: 19px;
  border-radius: 6px;
  margin-bottom: 10px
}

.skeleton-hero {
  height: 182px;
  border-radius: 15px
}

.skeleton-services {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f6f7f9
}

.skeleton-service-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px
}

.skeleton-service {
  height: 82px;
  border-radius: 12px
}

.skeleton-quick-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px
}

.skeleton-quick {
  height: 44px;
  border-radius: 10px
}

.result-skeleton {
  display: flex;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f1f3
}

.result-skeleton-image {
  display: block;
  width: 112px;
  height: 91px;
  flex: 0 0 auto;
  border-radius: 10px
}

.result-skeleton>span {
  flex: 1;
  min-width: 0;
  padding-top: 4px
}

.result-skeleton .skeleton-line.title {
  width: 87%;
  height: 14px
}

.result-skeleton .skeleton-line.medium {
  width: 70%;
  height: 10px
}

.result-skeleton .skeleton-line.short {
  width: 38%;
  height: 10px
}

.coupon-skeleton {
  min-height: 105px;
  margin-bottom: 10px;
  padding: 15px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-radius: 12px
}

.coupon-skeleton>span {
  width: 64%
}

.coupon-skeleton .skeleton-line {
  background: rgba(255, 255, 255, .64)
}

.coupon-skeleton .skeleton-line.title {
  width: 90%;
  height: 17px
}

.coupon-skeleton .skeleton-line.medium {
  width: 64%
}

.skeleton-button {
  width: 66px;
  height: 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .72)
}

.network-error {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 512px;
  margin: 24px 14px;
  padding: 14px;
  border-radius: 12px;
  background: #fff4ef;
  color: #7f3928
}

.network-error.compact {
  margin: 10px 0
}

.network-error>span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #ff6840;
  color: #fff
}

.network-error svg {
  width: 16px;
  height: 16px
}

.network-error>div {
  min-width: 0;
  flex: 1
}

.network-error strong {
  display: block;
  color: #52271e;
  font-size: 13px
}

.network-error p {
  margin: 4px 0 0;
  color: #8d5d51;
  font-size: 11px;
  line-height: 1.45
}

.network-error button {
  padding: 7px 9px;
  border-radius: 14px;
  background: #fff;
  color: #d84b24;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap
}

.detail-skeleton-photo {
  height: 280px
}

.detail-skeleton {
  padding-top: 18px
}

.detail-skeleton .skeleton-line.price {
  width: 37%;
  height: 30px;
  margin-top: 24px
}

.detail-skeleton-card {
  display: block;
  height: 72px;
  margin-top: 18px;
  border-radius: 10px
}

:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

button,
.is-tappable {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation
}

.welcome h1,
.entry-heading h2,
.section-line h2,
.detail-content h1 {
  font-optical-sizing: auto
}

.welcome h1 {
  letter-spacing: -.024em;
  line-height: 1.22
}

.detail-content h1 {
  letter-spacing: -.016em;
  line-height: 1.3
}

.list-head {
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%)
}

.is-tappable {
  cursor: pointer;
  outline: none;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), background-color 140ms ease-out, opacity 140ms ease-out
}

.is-tappable:active {
  transform: scale(.985)
}

.is-tappable:focus-visible {
  outline: 2px solid rgba(255, 90, 31, .72);
  outline-offset: 2px
}

.product-card.is-tappable:active {
  background: #fafafa
}

.result-card.is-tappable {
  border-radius: 10px
}

.result-card.is-tappable:active {
  background: #f6f7f9
}

.saved-card.is-tappable:active {
  background: #f7f8fa
}

@media(hover:hover) {
  .is-tappable:hover {
    opacity: .94
  }

  .product-card.is-tappable:hover {
    transform: translateY(-1px)
  }
}

@media(prefers-reduced-motion:reduce) {
  .is-tappable {
    transition: background-color 120ms ease-out, opacity 120ms ease-out
  }

  .is-tappable:active {
    transform: none
  }
}

@media(prefers-reduced-transparency:reduce) {
  .list-head {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }
}

.list-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  color: #9096a0;
  font-size: 11px
}

.list-footer>i {
  display: block;
  width: 25px;
  height: 1px;
  background: #e7e9ed
}

.list-footer-loading {
  min-height: 62px;
  gap: 7px
}

.list-footer-loading .footer-skeleton {
  width: 72px;
  height: 10px;
  border-radius: 5px;
  background-color: #eef0f3
}

.list-footer-loading .footer-skeleton:nth-child(2) {
  width: 48px
}

.list-footer-loading span {
  margin-left: 2px;
  color: #777e88
}

.list-footer-error {
  color: #a55843
}

.list-footer-error button {
  padding: 7px 10px;
  border-radius: 14px;
  background: #fff0e9;
  color: #dc4b1b;
  font-size: 11px;
  font-weight: 750
}

.list-sentinel {
  min-height: 64px;
  color: #a0a5ae
}

.list-end {
  color: #a2a7af
}

.home {
  background: linear-gradient(180deg, #fff 0 520px, var(--canvas) 520px)
}

.home-head {
  height: 57px;
  padding: 0 15px
}

.home-brand-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px
}

.home-back {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  flex: 0 0 auto;
  color: #151922;
  font-size: 30px;
  line-height: 1
}

.home-back:active {
  transform: scale(.96)
}

.laicai-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0
}

.laicai-brand img {
  width: 99px;
  height: auto;
  object-fit: contain
}

.laicai-brand i {
  width: 1px;
  height: 14px;
  background: #e6d7d7
}

.laicai-brand span {
  color: #7a5b5b;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap
}

.home .welcome {
  padding-top: 9px
}

.home .welcome p {
  color: var(--brand-deep);
  letter-spacing: .055em
}

.home .coupon-hero {
  box-shadow: 0 9px 22px rgba(150, 0, 0, .11)
}

.service-entry {
  border: 1px solid #f2e6e6
}

.entry-heading button {
  background: var(--brand-soft);
  color: var(--brand-red)
}

.photo-share {
  position: absolute;
  z-index: 1;
  top: 15px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-deep)
}

.photo-share svg {
  width: 18px;
  height: 18px
}

.share-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 13px 12px;
  border: 1px solid #f0dddd;
  border-radius: 12px;
  background: linear-gradient(115deg, #fff9f8, #fff2f0)
}

.share-guide-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--brand-deep);
  color: #fff
}

.share-guide-icon svg {
  width: 18px;
  height: 18px
}

.share-guide>div {
  min-width: 0;
  flex: 1
}

.share-guide strong {
  display: block;
  color: #4b2020;
  font-size: 13px
}

.share-guide p {
  margin: 4px 0 0;
  color: #8b6868;
  font-size: 10px;
  line-height: 1.45
}

.share-guide button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 15px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 750
}

.detail-buy {
  background: var(--brand-deep)
}

.detail-save.saved {
  background: var(--brand-soft);
  color: var(--brand-red)
}

.coupon-hero {
  background: var(--brand-red)
}

.home .coupon-hero-copy button {
  color: var(--brand-deep)
}

.reward,
.reward-detail {
  background: #fff0f0
}

.reward,
.reward-detail strong {
  color: var(--brand-red)
}

.quick-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px
}

.quick-nav>button {
  gap: 5px;
  padding: 8px 6px
}

.quick-nav strong {
  font-size: 10px
}

.quick-nav i {
  display: none
}

.saving-entry>span,
.tozong-entry>span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 8px
}

.saving-entry>span {
  background: #fff0f0;
  color: #a80000
}

.tozong-entry>span {
  background: #f0f4ff;
  color: #456ed2
}

.saving-entry b,
.tozong-entry b {
  display: none
}

.saving-page {
  min-height: 100vh;
  background: #fff
}

.saving-hero {
  margin: 8px 14px 14px;
  padding: 17px 16px;
  border-radius: 14px;
  background: linear-gradient(118deg, #860000, #ce1c22 58%, #ec5650);
  color: #fff;
  box-shadow: 0 8px 20px rgba(136, 0, 0, .15)
}

.saving-hero span {
  font-size: 10px;
  color: #ffe0cf
}

.saving-hero h2 {
  margin: 7px 0 3px;
  font-size: 22px;
  letter-spacing: -.025em
}

.saving-hero p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 11px
}

.saving-tabs {
  display: flex;
  gap: 19px;
  overflow: auto;
  padding: 0 16px 11px;
  border-bottom: 1px solid #f0eeee;
  scrollbar-width: none
}

.saving-tabs::-webkit-scrollbar {
  display: none
}

.saving-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 0;
  color: #777b84;
  font-size: 13px
}

.saving-tabs .active {
  color: #191b20;
  font-weight: 750
}

.saving-tabs .active:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-red)
}

.saving-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 13px 14px 8px;
  padding: 0 11px;
  border-radius: 10px;
  background: #f6f6f7;
  color: #7b818b
}

.saving-search svg {
  width: 16px;
  height: 16px
}

.saving-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #22252c;
  font: 12px inherit
}

.saving-search button {
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 700
}

.saving-sort {
  display: flex;
  gap: 9px;
  padding: 4px 14px 12px
}

.saving-sort button {
  padding: 6px 9px;
  border-radius: 14px;
  background: #f6f6f7;
  color: #737985;
  font-size: 11px
}

.saving-sort .active {
  background: #2c2020;
  color: #fff
}

.saving-list {
  padding: 0 14px 28px
}

.saving-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.saving-card {
  overflow: hidden;
  border: 1px solid #f0eeee;
  border-radius: 12px;
  background: #fff
}

.saving-card>img {
  width: 100%;
  height: 124px
}

.saving-card>div {
  padding: 9px
}

.saving-card span {
  display: inline-block;
  padding: 3px 5px;
  border-radius: 4px;
  background: #fff0f0;
  color: #b30000;
  font-size: 9px
}

.saving-card h2 {
  height: 35px;
  margin: 6px 0 3px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.42
}

.saving-card p {
  margin: 0;
  overflow: hidden;
  color: #868b94;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis
}

.saving-card .reward {
  margin-top: 6px
}

.saving-card footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 7px
}

.saving-card .price {
  font-size: 18px
}

.saving-card footer button {
  padding: 6px 8px;
  border-radius: 14px;
  background: #fff0f0;
  color: #b30000;
  font-size: 10px;
  font-weight: 750
}

.saving-card-skeleton {
  overflow: hidden;
  border-radius: 12px;
  background: #fff
}

.saving-card-skeleton>i {
  display: block;
  height: 124px
}

.saving-card-skeleton>span {
  display: block;
  padding: 10px
}

.saving-card-skeleton .skeleton-line.title {
  width: 88%;
  height: 13px
}

.saving-card-skeleton .skeleton-line.medium {
  width: 62%;
  height: 10px
}

.saving-card-skeleton .skeleton-line.short {
  width: 44%;
  height: 10px
}

.saving-more {
  display: block;
  margin: 19px auto 0;
  padding: 10px 17px;
  border-radius: 18px;
  background: #fff0f0;
  color: #b30000;
  font-size: 12px;
  font-weight: 750
}

.saving-end {
  padding: 22px 0 4px;
  color: #a1a5ad;
  font-size: 11px;
  text-align: center
}

.saving-cats {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 11px 14px 0;
  scrollbar-width: none
}

.saving-cats::-webkit-scrollbar {
  display: none
}

.saving-cats button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 14px;
  background: #f7f7f8;
  color: #747a84;
  font-size: 11px
}

.saving-cats .active {
  background: #fff0f0;
  color: #b30000;
  font-weight: 750
}

.coupon-more {
  display: block;
  margin: 17px auto 4px;
  padding: 9px 15px;
  border-radius: 17px;
  background: #fff0f0;
  color: #b30000;
  font-size: 12px;
  font-weight: 750
}

.coupon-end {
  margin: 17px 0 4px;
  color: #a0a5ad;
  font-size: 11px;
  text-align: center
}

.order-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 28px);
  margin: 15px 14px 0;
  padding: 12px;
  background: #fff7f6;
  border: 1px solid #f3e2e0;
  border-radius: 12px;
  text-align: left
}

.order-entry>span:first-child {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: #9c0000;
  color: #fff
}

.order-entry>span:nth-child(2) {
  flex: 1
}

.order-entry strong,
.order-entry small {
  display: block
}

.order-entry strong {
  font-size: 13px
}

.order-entry small {
  margin-top: 3px;
  color: #8a7575;
  font-size: 10px
}

.order-entry b {
  color: #a80000;
  font-size: 18px;
  font-weight: 400
}

.order-list {
  padding: 12px 14px
}

.order-list article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f0eeee
}

.order-list img {
  width: 55px;
  height: 55px;
  border-radius: 9px;
  background: #f3f3f4
}

.order-list article>div {
  min-width: 0;
  flex: 1
}

.order-list strong,
.order-list small,
.order-list span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.order-list strong {
  font-size: 13px
}

.order-list small {
  margin-top: 5px;
  color: #8a909a;
  font-size: 10px
}

.order-list span {
  margin-top: 4px;
  color: #ae0000;
  font-size: 10px
}

.order-list article>b {
  max-width: 94px;
  color: #a70000;
  font-size: 11px;
  text-align: right
}

.city-sheet {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--ink)
}

.city-sheet .sheet-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(17, 19, 24, .46);
  animation: city-mask-in 180ms ease-out
}

.city-sheet .sheet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 540px);
  max-height: min(88vh, 690px);
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -8px 28px rgba(27, 20, 22, .18);
  animation: city-sheet-in 240ms cubic-bezier(.2, .8, .2, 1)
}

.city-sheet .sheet-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px
}

.city-sheet .sheet-card header p {
  margin: 0 0 3px;
  color: var(--brand-red);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em
}

.city-sheet .sheet-card h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0
}

.city-sheet .sheet-card header button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f5f5f6;
  color: #505762;
  font-size: 12px;
  font-weight: 700
}

.city-sheet .sheet-card header button:active {
  transform: scale(.98)
}

.city-explain {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 13px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff3ef;
  color: #70433d
}

.city-explain span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #ffe1d9;
  color: var(--brand-red)
}

.city-explain svg {
  width: 14px;
  height: 14px
}

.city-explain p {
  margin: 0;
  color: #70433d;
  font-size: 12px;
  line-height: 1.45
}

.city-locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 43px;
  margin-top: 16px;
  border-radius: 12px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 750
}

.city-locate svg {
  width: 16px;
  height: 16px
}

@keyframes city-sheet-in {
  from {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0)
  }
}

@media(prefers-reduced-motion:reduce) {

  .city-sheet .sheet-card,
  .city-sheet .sheet-mask {
    animation: none
  }
}

.city-search {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  height: 43px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 1px solid #ebecef;
  border-radius: 12px;
  background: #f8f8f9;
  color: #666d78;
  transition: border-color 180ms ease, background 180ms ease
}

.city-search:focus-within {
  border-color: #e8aaa0;
  background: #fff
}

.city-search svg {
  width: 16px;
  height: 16px;
  color: var(--brand-red)
}

.city-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #20242b;
  font: 13px inherit
}

.city-search input::placeholder {
  color: #6d737d
}

.city-search span {
  color: #7f858f;
  font-size: 11px;
  white-space: nowrap
}

.city-sheet .city-picker-body {
  display: grid;
  position: relative;
  grid-template-columns: 94px minmax(0, 1fr);
  height: min(46vh, 400px);
  min-height: 310px;
  margin: 2px 0 0;
  border: 1px solid #eceff3;
  border-radius: 16px;
  overflow: hidden;
  background: #f6f7f9;
  touch-action: pan-y
}

.city-sheet .city-picker-body.is-searching {
  grid-template-columns: 1fr;
  background: #fff
}

.city-sheet .province-tabs {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 7px 6px;
  border-right: 1px solid #edf0f3;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch
}

.city-sheet .province-tabs::-webkit-scrollbar {
  display: none
}

.city-sheet .province-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #5f6671;
  font-size: 13px;
  font-weight: 650;
  line-height: 40px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease
}

.city-sheet .province-tabs button.active {
  background: #fff;
  color: var(--brand-red);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--brand-red), 0 1px 4px rgba(31, 35, 42, .04)
}

.city-sheet .province-tabs button:active {
  background: #fff
}

.city-sheet .city-picker-body.is-searching .province-tabs {
  display: none
}

.city-sheet .city-result-panel {
  display: flex;
  min-width: 0;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  background: #fff
}

.city-sheet .city-panel-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 0 15px;
  border-bottom: 1px solid #f1f2f4;
  background: #fff
}

.city-sheet .city-panel-title strong {
  min-width: 0;
  overflow: hidden;
  color: #252a32;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}

.city-sheet .city-panel-title span {
  flex: 0 0 auto;
  color: #858c96;
  font-size: 11px
}

.city-sheet .city-grid {
  display: block;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 6px 8px 10px;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch
}

.city-sheet .city-grid::-webkit-scrollbar {
  display: none
}

.city-sheet .city-picker-body.is-searching .city-grid {
  padding: 8px 10px 12px
}

.city-sheet .city-grid button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #2c323a;
  font-size: 14px;
  font-weight: 650;
  line-height: 44px;
  text-align: left;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease
}

.city-sheet .city-grid button:active {
  background: #f7f8fa
}

.city-sheet .city-grid button span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap
}

.city-sheet .city-grid button small {
  flex: 0 0 auto;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #89909a;
  font-size: 11px;
  font-weight: 600
}

.city-sheet .city-grid button.active {
  background: #fff2ef;
  color: var(--brand-red);
  font-weight: 800
}

.city-sheet .city-picker-body.is-searching .city-grid button.active {
  background: #fff2ef
}

.city-sheet .city-grid button.active::after {
  content: "\2713";
  flex: 0 0 auto;
  margin-left: 8px;
  color: var(--brand-red);
  font-size: 13px;
  font-weight: 900
}

.city-sheet .city-picker-body.is-searching .city-grid button.active::after {
  content: none
}

.city-sheet .city-grid button.active small {
  color: #c56868
}

.city-empty {
  grid-column: 1/-1;
  margin: 10px 0;
  padding: 28px 10px;
  color: #69717c;
  font-size: 12px;
  text-align: center
}

.city-sheet .city-locate {
  flex: 0 0 auto;
  min-height: 44px;
  margin-top: 14px;
  border-radius: 13px;
  box-shadow: 0 6px 12px rgba(156, 0, 0, .14)
}

.city-sheet .city-locate:active {
  transform: translateY(1px)
}

@keyframes city-mask-in {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.brand-nearby,
.brand-hotel,
.brand-travel,
.brand-hotpot {
  background: #fff
}

.brand-nearby img,
.brand-hotel img,
.brand-travel img,
.brand-hotpot img {
  position: absolute;
  left: -8px;
  top: -47px;
  width: 188px;
  height: auto;
  max-width: none;
  object-fit: contain
}

.brand-quick.brand-nearby img,
.brand-quick.brand-hotel img,
.brand-quick.brand-travel img,
.brand-quick.brand-hotpot img {
  left: -4px;
  top: -28px;
  width: 110px;
  height: auto
}