/* 中国全民保障 · 生活商城 */

.page-mall {
  --mall-life: #0052d9;
  --mall-life-soft: #eef4ff;
  --mall-housing: #1a5c8a;
  --mall-housing-soft: #e8f2fa;
  --mall-gold: #c9a227;
  --mall-gold-soft: #fff8e6;
}

.page-mall .app-main {
  flex: 1;
  min-width: 0;
  padding-bottom: 16px;
  background: var(--app-bg);
}

/* 有底部 Tab 的商城页：app-shell 预留底栏安全区 */
.page-mall-tabbar .site-shell.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
}

.page-mall-tabbar .site-shell .subpage-topbar {
  flex-shrink: 0;
}

.page-mall-sub:not(.page-mall-tabbar) .app-main {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.page-mall-detail .app-main {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* —— 配图容器：统一饱满显示 —— */
.mall-media {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.mall-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mall-media--hero {
  width: 128px;
  height: 100px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.mall-media--zone {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 82, 217, 0.15);
}

.mall-media--square {
  width: 100%;
  aspect-ratio: 1;
}

.mall-media--wide {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.mall-media--launch-sm {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.mall-media--launch-lg {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border-radius: 14px;
}

.mall-media--thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.mall-media--batch {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.mall-media--banner {
  width: 100%;
  height: 120px;
  border-radius: 12px;
}

.mall-media--vouchers-hero {
  width: 100%;
  height: 140px;
}

.mall-media--empty {
  width: 160px;
  height: 160px;
  border-radius: 16px;
}

.mall-media--voucher-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  pointer-events: none;
}

.mall-media--housing-cover {
  width: 100%;
  height: 160px;
}

/* —— 正式上线庆祝态 —— */
.page-mall--open .mall-hero {
  background: linear-gradient(165deg, #8b1a1a 0%, #c41e22 28%, #0052d9 72%, #003a9e 100%);
}

.page-mall--open .mall-hero__ribbon {
  background: linear-gradient(120deg, transparent 20%, rgba(201, 162, 39, 0.75) 50%, rgba(255, 229, 102, 0.45) 100%);
}

.page-mall--simulate .mall-hero {
  background: linear-gradient(165deg, #5a4a12 0%, #8a6a00 30%, #0052d9 72%, #003a9e 100%);
}

.mall-hero__open-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #8a6a00;
  background: linear-gradient(135deg, #fff8e6, #ffe566);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.page-mall--simulate .mall-hero__open-badge {
  color: #5a4a12;
  background: linear-gradient(135deg, #fff3cd, #ffd966);
}

.mall-open-strip {
  position: relative;
  margin: 0 14px 12px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(196, 30, 34, 0.18);
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.mall-media--open-strip {
  width: 100%;
  height: 110px;
}

.mall-open-strip__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(0, 26, 77, 0.82) 0%, rgba(0, 58, 158, 0.55) 55%, transparent 100%);
  color: #fff;
}

.mall-open-strip__content strong {
  font-size: 17px;
  font-weight: 700;
}

.mall-open-strip__content > span {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.92;
}

.mall-open-strip__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mall-btn--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  flex: 1;
}

.page-mall--open .mall-zone-card {
  box-shadow: 0 6px 18px rgba(0, 82, 217, 0.12);
}

.page-mall--open .mall-section-head h2::after {
  content: " · 火热开放中";
  font-size: 12px;
  font-weight: 600;
  color: var(--gov-red);
}

.mall-promo-banner--open {
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 6px 20px rgba(196, 30, 34, 0.15);
}

/* —— Hero —— */
.mall-hero {
  position: relative;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 28px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(165deg, #0c4db8 0%, #0052d9 45%, #003a9e 100%);
}

.mall-hero__ribbon {
  position: absolute;
  top: -18px;
  right: -28%;
  width: 85%;
  height: 100px;
  background: linear-gradient(120deg, transparent 30%, rgba(196, 30, 34, 0.82) 55%, rgba(154, 24, 28, 0.55) 100%);
  transform: rotate(-8deg);
  pointer-events: none;
}

.mall-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 12px;
  align-items: stretch;
  min-height: 100px;
}

.mall-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mall-hero__text h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}

.mall-hero__slogan {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.mall-hero__sub {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.mall-hero__visual-wrap {
  align-self: stretch;
}

.mall-hero__visual-wrap.mall-media--hero {
  width: 100%;
  height: 100%;
  min-height: 100px;
}

/* —— 首页运营横幅 —— */
.mall-promo-banner {
  display: block;
  position: relative;
  margin: 0 14px 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.mall-promo-banner .mall-media--banner {
  border-radius: 12px;
}

.mall-promo-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 26, 77, 0.72) 100%);
  color: #fff;
}

.mall-promo-banner__overlay strong {
  font-size: 15px;
  font-weight: 700;
}

.mall-promo-banner__overlay span {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.9;
}

.mall-hero__curve {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -1px;
  height: 18px;
  background: var(--app-bg);
  border-radius: 16px 16px 0 0;
  z-index: 3;
}

/* —— 双钱包 —— */
.mall-wallets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: -8px 14px 12px;
  position: relative;
  z-index: 5;
}

.mall-wallet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0, 82, 217, 0.08);
  text-decoration: none;
  color: inherit;
}

.mall-wallet__label {
  font-size: 11px;
  color: var(--muted);
}

.mall-wallet__amt {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.mall-wallet--salary .mall-wallet__amt { color: var(--mall-life); }
.mall-wallet--fund .mall-wallet__amt { color: var(--mall-gold); }

.mall-wallet__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
}

.mall-wallet--salary .mall-wallet__tag {
  color: var(--mall-life);
  background: var(--mall-life-soft);
}

.mall-wallet--fund .mall-wallet__tag {
  color: #8a6a00;
  background: var(--mall-gold-soft);
}

/* —— 专区入口 —— */
.mall-zones {
  display: grid;
  gap: 10px;
  margin: 0 14px 14px;
}

.mall-zone-card {
  position: relative;
  display: block;
  padding: 16px;
  min-height: 108px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.mall-zone-card--life {
  border: 1px solid rgba(0, 82, 217, 0.12);
  background: linear-gradient(135deg, #fff 0%, #f3f8ff 100%);
}

.mall-zone-card--housing {
  border: 1px solid rgba(201, 162, 39, 0.25);
  background: linear-gradient(135deg, #fff 0%, #faf6ea 100%);
}

.mall-zone-card__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
}

.mall-zone-card--life .mall-zone-card__badge { background: var(--mall-life); }
.mall-zone-card--housing .mall-zone-card__badge { background: linear-gradient(135deg, #c9a227, #a8841a); }

.mall-zone-card h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.mall-zone-card p {
  margin: 0;
  max-width: calc(100% - 100px);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.mall-zone-card__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--muted);
  opacity: 0.5;
}

/* —— 区块头 —— */
.mall-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 14px 10px;
}

.mall-section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.mall-section-head a {
  font-size: 12px;
  color: var(--mall-life);
}

/* —— 分类 Tab —— */
.mall-cats {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mall-cats::-webkit-scrollbar { display: none; }

.mall-cat {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mall-cat.is-active {
  color: #fff;
  background: var(--mall-life);
  border-color: var(--mall-life);
}

/* —— 商品 Grid —— */
.mall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 16px;
}

.mall-product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.mall-product__img-wrap {
  position: relative;
}

.mall-product__img-wrap.mall-media--square {
  background: linear-gradient(145deg, #eef4ff, #f8fbff);
}

.mall-product__tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 82, 217, 0.88);
  border-radius: 4px;
}

.mall-product__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  flex: 1;
}

.mall-product__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mall-product__price {
  margin-top: auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--gov-red);
}

.mall-product__wallet {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.mall-product--preparing .mall-product__img-wrap img {
  filter: saturate(0.72) brightness(0.94);
}

.mall-product__stamp {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.mall-product__status {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mall-product__status--preparing {
  color: #8a4b00;
  background: linear-gradient(135deg, #fff3d6, #ffd58a);
  box-shadow: 0 2px 8px rgba(138, 75, 0, 0.15);
}

.mall-product__status--sold_out {
  color: #666;
  background: rgba(255, 255, 255, 0.92);
}

.mall-preparing-banner {
  margin: 12px 14px 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 82, 217, 0.1);
}

.mall-media--preparing-hero {
  border-radius: 0;
  max-height: 140px;
  overflow: hidden;
}

.mall-media--preparing-hero img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.mall-preparing-banner__body {
  padding: 14px 16px 16px;
}

.mall-preparing-banner__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #8a4b00;
  background: linear-gradient(135deg, #fff3d6, #ffd58a);
}

.mall-preparing-banner__body strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}

.mall-preparing-banner__body p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.mall-preparing-pill {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #8a4b00;
  background: linear-gradient(135deg, #fff3d6, #ffd58a);
}

.mall-preparing-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #8a4b00;
  background: #fff8eb;
  border: 1px solid #ffe2a8;
}

.mall-detail-img-wrap--preparing img {
  filter: saturate(0.75) brightness(0.95);
}

.mall-detail-stamp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15));
}

.mall-btn--muted {
  background: #e8ecf2 !important;
  color: #8a9199 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* —— 住房专区 —— */
.mall-housing-hero {
  position: relative;
  padding: 0 0 16px;
  color: #fff;
  background: linear-gradient(165deg, #0a3d6b 0%, #1a5c8a 55%, #0c4db8 100%);
  overflow: hidden;
}

.mall-housing-hero .mall-media--housing-cover {
  border-radius: 0;
}

.mall-housing-hero__body {
  padding: 14px 14px 0;
}

.mall-housing-hero h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.mall-housing-hero p {
  margin: 0;
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.5;
}

.mall-quota {
  margin-top: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

.mall-quota__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}

.mall-quota__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

.mall-quota__fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a227, #ffe566);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.mall-dev-strip {
  display: flex;
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.mall-dev-strip::-webkit-scrollbar { display: none; }

.mall-dev {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
}

.mall-dev__icon {
  display: block;
  width: 48px;
  height: 48px;
}

.mall-dev__name {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.mall-media--housing-cover {
  width: 100%;
  height: 180px;
}

.mall-media--housing-card {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.mall-media--dev {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mall-dev__icon-fallback {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
}

.mall-housing-card {
  margin: 14px;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  border-top: 3px solid var(--mall-gold);
}

.mall-housing-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.mall-housing-card__sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.mall-housing-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.mall-housing-card__price strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--mall-gold);
}

.mall-housing-card__price span {
  font-size: 12px;
  color: var(--muted);
}

.mall-housing-standards {
  margin: 0 14px 14px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.mall-housing-standards h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.mall-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.mall-layout-card {
  padding: 10px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff, #fff);
  border: 1px solid #e8ecf2;
  text-align: center;
}

.mall-media--layout {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  margin-bottom: 6px;
}

.mall-layout-card strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

.mall-layout-card span,
.mall-layout-card small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.mall-layout-card em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--gov-red);
}

.mall-housing-rules {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.mall-layout-picker {
  border: none;
  margin: 0 0 8px;
  padding: 0;
}

.mall-layout-picker legend {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.mall-layout-picker__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mall-layout-option {
  display: block;
  cursor: pointer;
}

.mall-layout-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mall-layout-option__card {
  padding: 12px;
  border-radius: 12px;
  border: 2px solid #e8ecf2;
  background: #fff;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
}

.mall-layout-option__card img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}

.mall-layout-option__card strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.mall-layout-option__card span,
.mall-layout-option__card small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.mall-layout-option__card em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--gov-red);
}

.mall-layout-option input:checked + .mall-layout-option__card {
  border-color: #c9a227;
  box-shadow: 0 4px 16px rgba(201, 162, 39, 0.2);
}

.mall-housing-pricing {
  margin: 0 14px 14px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.mall-housing-pricing h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.mall-housing-pricing__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px dashed #eef1f6;
}

.mall-housing-pricing__row:last-of-type {
  border-bottom: none;
}

.mall-housing-pricing__row--due strong {
  color: var(--gov-red);
  font-size: 16px;
}

.mall-housing-pricing__paid {
  margin: 10px 0 0;
  font-size: 12px;
  color: #0a7c42;
}

.mall-housing-pay {
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e6, #fff);
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.mall-housing-pay p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #3d4a63;
}

.mall-housing-pay .mall-btn {
  width: 100%;
}

.mall-benefit-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.mall-benefit-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #3d4a63;
  line-height: 1.5;
}

.mall-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--mall-gold);
  border-radius: 50%;
}

/* —— 按钮 —— */
.mall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.mall-btn:active:not(:disabled) {
  transform: scale(0.98);
  opacity: 0.95;
}

.mall-btn--primary {
  width: 100%;
  color: #fff;
  background: linear-gradient(135deg, #1a6fff 0%, #0b54ff 55%, #0047e4 100%);
  box-shadow: 0 6px 20px rgba(11, 84, 255, 0.32);
}

.mall-btn--gold {
  width: 100%;
  color: #1a1f2e;
  background: linear-gradient(135deg, #e8c547 0%, #c9a227 55%, #a8841a 100%);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.28);
}

.mall-btn--ghost {
  color: var(--mall-life);
  background: var(--mall-life-soft);
}

.mall-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* —— 详情页 —— */
.mall-detail-img-wrap {
  position: relative;
  width: 100%;
  background: linear-gradient(145deg, #eef4ff, #f8fbff);
}

.mall-detail-body {
  padding: 16px 14px 80px;
  background: #fff;
}

.mall-detail-body h1 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}

.mall-detail-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.mall-detail-price strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--gov-red);
}

.mall-detail-price--gold strong { color: var(--mall-gold); }

.mall-detail-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-line;
}

.mall-checkout-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 430px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
}

.mall-checkout-bar__price {
  flex: 1;
  min-width: 0;
}

.mall-checkout-bar__price small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.mall-checkout-bar__price strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--gov-red);
}

.mall-checkout-bar .mall-btn {
  flex: 0 0 140px;
  min-height: 44px;
  font-size: 14px;
}

.mall-checkout-bar__balance {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--gov-blue);
  font-weight: 500;
}

.mall-checkout-bar__balance.is-low {
  color: var(--gov-red);
}

/* —— 支付弹窗 —— */
body.mall-pay-open {
  overflow: hidden;
}

.mall-pay-overlay {
  z-index: 200;
  padding: 16px;
  align-items: flex-end;
}

.mall-pay-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 0 16px;
  background: #fff;
  border-radius: 20px 20px 16px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: mall-pay-rise 0.28s ease-out;
}

@keyframes mall-pay-rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.mall-pay-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #5a6478;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mall-pay-modal__hero {
  height: 100px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f1ff 0%, #f5f9ff 100%);
}

.mall-pay-modal__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mall-pay-modal h3 {
  margin: 14px 18px 4px;
  font-size: 18px;
  color: #1a1f2e;
}

.mall-pay-modal__product {
  margin: 0 18px 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.mall-pay-modal__amount {
  margin: 0 14px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  border: 1px solid rgba(196, 30, 34, 0.12);
}

.mall-pay-modal--housing .mall-pay-modal__amount {
  background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
  border-color: rgba(184, 134, 11, 0.2);
}

.mall-pay-modal__amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
}

.mall-pay-modal__amount-row em {
  font-style: normal;
  font-weight: 600;
  color: #1a1f2e;
}

.mall-pay-modal__amount-row--deduct em {
  color: #0a7c42;
}

.mall-pay-modal__amount-row--total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.mall-pay-modal__amount-row--total span {
  font-weight: 600;
  color: #1a1f2e;
}

.mall-pay-modal__amount-row--total strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--gov-red);
  line-height: 1;
}

.mall-pay-modal--housing .mall-pay-modal__amount-row--total strong {
  color: var(--mall-gold, #b8860b);
}

.mall-pay-modal__amount-row--total strong em {
  margin-left: 2px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.mall-pay-modal__coupon {
  margin: 0 14px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
}

.mall-pay-modal__coupon--empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.mall-pay-modal__coupon--empty a {
  color: var(--gov-blue);
  font-weight: 600;
  text-decoration: none;
}

.mall-pay-modal__coupon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1f2e;
}

.mall-pay-modal__coupon-head small {
  font-weight: 400;
  color: var(--muted);
}

.mall-pay-coupon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mall-pay-coupon-item:last-child {
  margin-bottom: 0;
}

.mall-pay-coupon-item.is-selected {
  border-color: var(--gov-blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.1);
}

.mall-pay-modal--housing .mall-pay-coupon-item.is-selected {
  border-color: var(--mall-gold, #c9a227);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.mall-pay-coupon-item input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--gov-blue);
}

.mall-pay-modal--housing .mall-pay-coupon-item input {
  accent-color: var(--mall-gold, #c9a227);
}

.mall-pay-coupon-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #e8c547, #c9a227);
}

.mall-pay-coupon-item__body {
  flex: 1;
  min-width: 0;
}

.mall-pay-coupon-item__body strong {
  display: block;
  font-size: 14px;
  color: #1a1f2e;
  line-height: 1.3;
}

.mall-pay-coupon-item__body small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.mall-pay-coupon-item__amt {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0a7c42;
}

.mall-pay-coupon-item--none .mall-pay-coupon-item__body strong {
  font-size: 13px;
}

.mall-pay-modal--housing .mall-pay-modal__wallet {
  border-color: var(--mall-gold, #c9a227);
  background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
}

.mall-pay-modal--housing .mall-pay-modal__wallet-icon {
  background: linear-gradient(145deg, #e8c547, #b8860b);
}

.mall-pay-modal--housing .mall-pay-modal__wallet-head small em {
  color: var(--mall-gold, #b8860b);
}

.mall-pay-modal__note {
  margin: 0 18px 10px;
  font-size: 12px;
  color: #0a7c42;
  line-height: 1.5;
}

.mall-pay-modal__amount span {
  font-size: 13px;
  color: var(--muted);
}

.mall-pay-modal__amount strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--gov-red);
  line-height: 1;
}

.mall-pay-modal__amount strong em {
  margin-left: 2px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.mall-pay-modal__wallet {
  margin: 0 14px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--gov-blue);
  background: linear-gradient(135deg, #f0f6ff 0%, #fff 100%);
}

.mall-pay-modal__wallet.is-insufficient {
  border-color: #f0a0a0;
  background: linear-gradient(135deg, #fff8f8 0%, #fff 100%);
}

.mall-pay-modal__wallet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mall-pay-modal__wallet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, #3d7ee8, #0052d9);
  color: #fff;
  flex-shrink: 0;
}

.mall-pay-modal__wallet-icon svg {
  width: 22px;
  height: 22px;
}

.mall-pay-modal__wallet-head strong {
  display: block;
  font-size: 15px;
  color: #1a1f2e;
}

.mall-pay-modal__wallet-head small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.mall-pay-modal__wallet-head small em {
  font-style: normal;
  font-weight: 700;
  color: var(--gov-blue);
}

.mall-pay-modal__wallet.is-insufficient .mall-pay-modal__wallet-head small em {
  color: var(--gov-red);
}

.mall-pay-modal__wallet-check {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gov-blue);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mall-pay-modal__wallet.is-insufficient .mall-pay-modal__wallet-check {
  display: none;
}

.mall-pay-modal__warn {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(196, 30, 34, 0.2);
  font-size: 12px;
  color: var(--gov-red);
  line-height: 1.5;
}

.mall-pay-modal__warn a {
  color: var(--gov-blue);
  font-weight: 600;
  text-decoration: none;
}

.mall-pay-modal__actions {
  display: flex;
  gap: 10px;
  padding: 0 14px;
}

.mall-pay-modal__actions .mall-btn {
  flex: 1;
  min-height: 44px;
}

.page-mall-detail .app-shell,
.page-mall-apply .app-shell {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* —— 订单 —— */
.mall-order-list {
  padding: 0 14px 16px;
  list-style: none;
  margin: 0;
}

.mall-order-item {
  display: block;
  margin-bottom: 10px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
}

.mall-order-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}

.mall-order-pill {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}

.mall-order-pill--pending { color: #b45309; background: #fff4e5; }
.mall-order-pill--applied { color: var(--mall-life); background: var(--mall-life-soft); }
.mall-order-pill--done { color: var(--gov-green); background: #e8f6ef; }

.mall-order-item__body {
  display: flex;
  gap: 10px;
}

.mall-order-item__thumb-wrap {
  flex: 0 0 64px;
}

.mall-order-item__info {
  flex: 1;
  min-width: 0;
}

.mall-order-item__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.mall-order-item__meta {
  font-size: 12px;
  color: var(--muted);
}

.mall-order-item__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mall-order-item__amt {
  font-size: 16px;
  font-weight: 700;
  color: var(--gov-red);
}

/* —— 空状态 —— */
.mall-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 32px;
  text-align: center;
}

.mall-empty .mall-media--empty {
  margin-bottom: 16px;
  background: var(--mall-life-soft);
}

.mall-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.mall-empty p {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
}

/* —— 表单 —— */
.mall-form {
  padding: 14px;
}

.mall-form .field {
  display: block;
  margin-bottom: 12px;
}

.mall-form .field span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.mall-form .field input,
.mall-form .field textarea,
.mall-form .field select {
  width: 100%;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  background: #fafbfd;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mall-form .field textarea { resize: vertical; min-height: 80px; }

.mall-receiver-panel {
  margin: 0 14px 14px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.mall-receiver-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.mall-tips {
  margin: 0 14px 16px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.mall-tips h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.mall-tips p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}

.mall-top-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
}

.mall-top-actions a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mall-life);
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
}

.mall-skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #f8f9fb 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: mall-shimmer 1.2s infinite;
  border-radius: 12px;
  min-height: 120px;
}

@keyframes mall-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.page-mall-sub .subpage-topbar + main,
.page-mall-sub main {
  flex: 1;
}

/* —— 上线预告 —— */
.mall-launch-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff8e6 0%, #eef4ff 100%);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.mall-launch-banner__icon {
  flex: 0 0 48px;
}

.mall-launch-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mall-launch-banner__text strong {
  font-size: 14px;
  font-weight: 700;
  color: #8a6a00;
}

.mall-launch-banner__text span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.mall-launch-overlay {
  z-index: 300;
}

.mall-launch-modal {
  width: min(320px, 100%);
  padding: 22px 20px 18px;
  text-align: center;
}

.mall-launch-modal__img-wrap {
  margin: 0 auto 12px;
}

.mall-launch-modal__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #8a6a00;
  background: #fff8e6;
  border-radius: 999px;
}

.mall-launch-modal h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.mall-launch-modal p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.mall-launch-modal__btn {
  width: 100%;
}

/* —— 开放庆祝弹窗（每次进入商城） —— */
.mall-celebrate-overlay {
  z-index: 310;
}

.mall-celebrate-modal {
  width: min(320px, 100%);
  padding: 0 0 18px;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: 0 16px 48px rgba(196, 30, 34, 0.22);
}

.mall-celebrate-modal--simulate {
  border-color: rgba(255, 217, 102, 0.5);
}

.mall-media--celebrate-modal {
  width: 100%;
  height: 140px;
  border-radius: 0;
}

.mall-celebrate-modal__img-wrap {
  margin: 0;
}

.mall-celebrate-modal__badge {
  display: inline-block;
  margin: -14px auto 10px;
  position: relative;
  z-index: 1;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #8a6a00;
  background: linear-gradient(135deg, #fff8e6, #ffe566);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.mall-celebrate-modal--simulate .mall-celebrate-modal__badge {
  color: #5a4a12;
  background: linear-gradient(135deg, #fff3cd, #ffd966);
}

.mall-celebrate-modal h3 {
  margin: 0 14px 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.mall-celebrate-modal p {
  margin: 0 14px 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.mall-celebrate-modal__actions {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 10px;
}

.mall-celebrate-modal__actions .mall-btn {
  flex: 1;
  min-height: 42px;
  font-size: 14px;
}

.mall-celebrate-modal__close {
  display: block;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 10px;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

.mall-celebrate-modal__close:active {
  opacity: 0.7;
}

/* —— 进度时间轴 —— */
.mall-timeline-wrap {
  margin: 0 14px 16px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.mall-timeline-wrap h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
}

.mall-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mall-timeline__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
  padding-left: 4px;
}

.mall-timeline__item:last-child {
  padding-bottom: 0;
}

.mall-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.mall-timeline__item--done:not(:last-child)::before {
  background: linear-gradient(180deg, var(--gov-green), var(--line));
}

.mall-timeline__dot {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  z-index: 1;
}

.mall-timeline__item--done .mall-timeline__dot {
  background: var(--gov-green);
  border-color: var(--gov-green);
  box-shadow: inset 0 0 0 3px #fff;
}

.mall-timeline__item--current .mall-timeline__dot {
  background: var(--mall-life);
  border-color: var(--mall-life);
  box-shadow: 0 0 0 4px rgba(0, 82, 217, 0.15);
}

.mall-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mall-timeline__body strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.mall-timeline__item--upcoming .mall-timeline__body strong {
  color: var(--muted);
}

.mall-timeline__body span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.mall-fulfillment-note {
  margin: -8px 14px 16px;
  padding: 10px 12px;
  font-size: 12px;
  color: #5a6f94;
  background: #eef4ff;
  border-radius: 8px;
}

.mall-batch-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 12px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 82, 217, 0.1);
}

.mall-batch-banner__icon {
  flex: 0 0 40px;
}

/* —— 消费券码卡片 —— */
.mall-voucher-card {
  position: relative;
  margin: 0 14px 12px;
  padding: 18px 16px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a4ab5 0%, #0052d9 55%, #003a9e 100%);
  box-shadow: 0 8px 24px rgba(0, 82, 217, 0.28);
}

.mall-voucher-card__bg-wrap {
  z-index: 0;
}

.mall-voucher-card__content {
  position: relative;
  z-index: 1;
  color: #fff;
}

.mall-voucher-card__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.85;
}

.mall-voucher-card__code {
  display: block;
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

.mall-voucher-card__copy {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #003a9e;
  background: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.mall-voucher-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.mall-voucher-card__status {
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.mall-voucher-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mall-voucher-card__use {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  cursor: pointer;
}

.mall-voucher-card__tip {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.82;
}

.mall-voucher-card--used {
  background: linear-gradient(135deg, #5a6478 0%, #7a8494 100%);
  box-shadow: 0 6px 18px rgba(90, 100, 120, 0.25);
}

.mall-voucher-card--used .mall-voucher-card__code {
  text-decoration: line-through;
  opacity: 0.75;
}

.mall-voucher-card--void {
  background: linear-gradient(135deg, #6b3030 0%, #8b4040 100%);
  box-shadow: 0 6px 18px rgba(139, 64, 64, 0.25);
}

/* —— 我的券包 —— */
.mall-vouchers-hero {
  position: relative;
  margin-bottom: 12px;
  color: #fff;
  background: linear-gradient(165deg, #0c4db8 0%, #0052d9 100%);
}

.mall-vouchers-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 14px 14px;
}

.mall-vouchers-stat {
  padding: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

.mall-vouchers-stat strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
}

.mall-vouchers-stat span {
  font-size: 11px;
  opacity: 0.88;
}

.mall-voucher-list {
  display: grid;
  gap: 10px;
  padding: 0 14px 16px;
}

.mall-voucher-item {
  display: block;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  border-left: 4px solid var(--mall-life);
}

.mall-voucher-item--used {
  border-left-color: #8a94a8;
  opacity: 0.82;
}

.mall-voucher-item--void {
  border-left-color: #c41e22;
  opacity: 0.75;
}

.mall-voucher-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mall-voucher-item__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.mall-voucher-item__pill {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  color: var(--mall-life);
  background: var(--mall-life-soft);
}

.mall-voucher-item--used .mall-voucher-item__pill {
  color: #5a6478;
  background: #eef1f6;
}

.mall-voucher-item__code {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mall-life);
  font-variant-numeric: tabular-nums;
}

.mall-voucher-item--used .mall-voucher-item__code {
  text-decoration: line-through;
  color: var(--muted);
}

.mall-voucher-item__meta {
  font-size: 12px;
  color: var(--muted);
}

.mall-voucher-item__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mall-voucher-item__actions button {
  flex: 1;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
}

.mall-voucher-item__copy {
  color: var(--mall-life);
  background: var(--mall-life-soft);
  border: 0;
}

.mall-voucher-item__use {
  color: #fff;
  background: var(--mall-life);
  border: 0;
}

/* —— 我的安居进度（住房专区） —— */
.mall-housing-progress {
  margin: 12px 14px 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(26, 92, 138, 0.12);
}

.mall-media--housing-progress {
  width: 100%;
  height: 100px;
}

.mall-housing-progress__body {
  padding: 14px;
}

.mall-housing-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.mall-housing-progress__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.mall-housing-progress__meta {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.mall-housing-progress__timeline {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.mall-housing-progress__step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--muted);
}

.mall-housing-progress__step > span {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--line);
}

.mall-housing-progress__step--done > span {
  background: var(--gov-green);
}

.mall-housing-progress__step--current > span {
  background: var(--mall-life);
  box-shadow: 0 0 0 3px var(--mall-life-soft);
}

.mall-housing-progress__step strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.mall-housing-progress__step small {
  display: block;
  line-height: 1.4;
}

.mall-housing-progress .mall-btn {
  width: 100%;
  min-height: 44px;
}

/* —— 住房 FAQ —— */
.mall-faq {
  margin: 0 14px 20px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(26, 92, 138, 0.1);
}

.mall-media--faq-head {
  width: 100%;
  height: 88px;
}

.mall-faq__body {
  padding: 14px;
}

.mall-faq__body h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.mall-faq__item {
  border-bottom: 1px solid var(--line);
}

.mall-faq__item:last-child {
  border-bottom: 0;
}

.mall-faq__item summary {
  padding: 12px 28px 12px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.mall-faq__item summary::-webkit-details-marker {
  display: none;
}

.mall-faq__item summary::after {
  content: "›";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: var(--muted);
  font-size: 18px;
  transition: transform 0.2s ease;
}

.mall-faq__item[open] summary::after {
  transform: translateY(-50%) rotate(-90deg);
  color: var(--mall-life);
}

.mall-faq__item p {
  margin: 0 0 12px;
  padding-top: 2px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* —— 住房尾款支付成功 —— */
.mall-balance-success-banner {
  margin: 0 0 14px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff9eb 0%, #fff 55%);
  border: 1px solid #ffe2a8;
  box-shadow: 0 8px 24px rgba(196, 30, 34, 0.08);
}

.mall-media--balance-success {
  max-height: 120px;
  overflow: hidden;
}

.mall-media--balance-success img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.mall-balance-success-banner__body {
  padding: 14px 16px 16px;
}

.mall-balance-success-banner__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #0a7c42;
  background: #e8f8ef;
}

.mall-balance-success-banner__body strong {
  display: block;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
}

.mall-balance-success-banner__body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.mall-balance-success-banner__step {
  font-size: 13px;
  font-weight: 600;
  color: #8a6a00 !important;
}

.mall-balance-success-banner__body small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.mall-housing-pricing__row--paid strong {
  color: #0a7c42;
}

.mall-balance-success-overlay {
  z-index: 1200;
}

.mall-balance-success-modal {
  width: min(92vw, 360px);
  padding: 0 0 18px;
  overflow: hidden;
  text-align: center;
  border-radius: 18px;
}

.mall-balance-success-modal__img-wrap {
  margin: 0;
  border-radius: 0;
}

.mall-media--balance-success-modal img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.mall-balance-success-modal__badge {
  display: inline-block;
  margin: 12px 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #0a7c42;
  background: #e8f8ef;
}

.mall-balance-success-modal h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--ink);
}

.mall-balance-success-modal__amount {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  color: var(--gov-red);
}

.mall-balance-success-modal__amount span {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.mall-balance-success-modal__msg {
  margin: 0 14px 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.mall-balance-success-modal__step {
  margin: 0 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #8a6a00;
}

.mall-balance-success-modal__btn {
  width: calc(100% - 28px);
  margin: 0 14px;
}

/* —— 住房互动升级 —— */
.mall-quota__batch-tip {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8a6a00;
}

.mall-heat {
  margin: 12px 14px 0;
  display: grid;
  gap: 8px;
}

.mall-heat__item {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e6, #fff);
  border: 1px solid rgba(201, 162, 39, 0.25);
}

.mall-heat__label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.mall-heat__item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.mall-ticker--broadcast {
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line, #e8ecf2);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.mall-ticker__badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mall-housing-soft, #e8f2fa);
  color: #1a5c8a;
  font-size: 11px;
  font-weight: 700;
}

.mall-ticker__line {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.35s ease;
}

.mall-ticker__line.is-fade {
  opacity: 1;
}

.mall-housing-standards__hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.mall-layout-card--pick {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mall-layout-card--pick:active {
  transform: scale(0.98);
}

.mall-layout-card--pick:focus-visible {
  outline: 2px solid #1a5c8a;
  outline-offset: 2px;
}

.mall-showroom--hidden {
  display: none !important;
}

.mall-showroom:not([hidden]) {
  display: block;
}

.mall-fund-gap {
  margin: 12px 14px 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(165deg, #0a3d6b 0%, #1a5c8a 100%);
  color: #fff;
}

.mall-fund-gap h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.mall-fund-gap__ok,
.mall-fund-gap__need {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
}

.mall-fund-gap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mall-fund-gap__action,
.mall-fund-gap__go {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.mall-showroom {
  margin: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.mall-showroom h3 { margin: 0 0 10px; font-size: 15px; }

.mall-showroom__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.mall-showroom__tab {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line, #e8ecf2);
  background: #fff;
  font-size: 12px;
}

.mall-showroom__tab.is-active {
  background: var(--mall-housing-soft, #e8f2fa);
  border-color: #1a5c8a;
  color: #1a5c8a;
  font-weight: 600;
}

.mall-showroom__intro {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.mall-media--showroom {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
}

.mall-showroom__slide p {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.mall-market-compare {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #fff8e6;
  display: grid;
  gap: 8px;
}

.mall-market-compare div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.mall-market-compare strong { color: var(--gov-red); font-size: 13px; }
.mall-market-compare em { color: #8a6a00; font-style: normal; font-weight: 600; }

.mall-market-compare--detail { margin: 0 0 12px; }

.mall-faq__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mall-faq__link {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mall-housing-soft, #e8f2fa);
  color: #1a5c8a;
  font-size: 12px;
  text-decoration: none;
}

.mall-balance-progress {
  margin: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.mall-balance-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mall-balance-progress__head h3 {
  margin: 0;
  font-size: 15px;
}

.mall-balance-progress__head span {
  font-size: 12px;
  color: var(--muted);
}

.mall-balance-progress__meta,
.mall-balance-progress__foot {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.mall-balance-progress__bar {
  height: 8px;
  border-radius: 999px;
  background: #eef1f6;
  overflow: hidden;
  margin-bottom: 8px;
}

.mall-balance-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a227, #e8c547);
}

.assets-housing-gap {
  margin: 12px 14px 0;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(26, 92, 138, 0.18);
  box-shadow: 0 2px 10px rgba(26, 92, 138, 0.06);
}

.assets-housing-gap h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #1a5c8a;
}

.assets-housing-gap p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.assets-housing-gap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assets-housing-gap__actions a {
  padding: 6px 12px;
  border-radius: 999px;
  background: #e8f2fa;
  color: #1a5c8a;
  font-size: 12px;
  text-decoration: none;
}

/* —— 住房权益券兑换 —— */
.mall-rights-redeem {
  margin: 14px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e6 0%, #fff 60%);
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.mall-rights-redeem h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #8a6a00;
}

.mall-rights-redeem__hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.mall-rights-redeem__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mall-rights-redeem__actions .mall-btn {
  min-height: 44px;
  font-size: 14px;
}

.mall-rights-redeem--pending {
  background: linear-gradient(135deg, #eef4ff 0%, #fff 70%);
  border-color: rgba(0, 82, 217, 0.25);
}

.mall-rights-redeem--pending p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.mall-rights-redeem--done {
  background: #f6fbf6;
  border-color: rgba(10, 124, 66, 0.25);
}

.mall-rights-redeem--done p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #0a7c42;
}

.mall-rights-redeem--banner {
  margin: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e6, #fff);
  border: 1px solid rgba(201, 162, 39, 0.4);
}

.mall-rights-redeem--banner strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #8a6a00;
}

.mall-rights-redeem--banner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.mall-detail-voucher-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff8e6;
  font-size: 13px;
  line-height: 1.6;
  color: #8a6a00;
}

.mall-voucher-card__face {
  margin: 0 0 8px;
  font-size: 13px;
  color: #8a6a00;
}

.mall-voucher-item__face {
  margin: 0 0 6px;
  font-size: 12px;
  color: #8a6a00;
}

.mall-voucher-item__actions--rights .mall-btn {
  min-height: 40px;
}