/* 正式版小程序预览弹窗样式：浅色卡面、大圆角、柔和投影与磨砂关闭按钮。 */

.hmp-dialog {
  border-radius: 24px !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
}

.hmp-card {
  position: relative;
  padding: 26px 24px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 2px 10px -8px rgba(40, 32, 96, .2), 0 30px 70px -40px rgba(40, 32, 96, .55);
  text-align: center;
}

.hmp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #8d90a6;
  background: rgba(244, 242, 251, .9);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.hmp-close:hover { background: #ecebf6; color: #4c4f66; }
.hmp-close:focus-visible { outline: 2px solid #8b7ef0; outline-offset: 2px; }

.hmp-head { padding: 0 8px; }
.hmp-badge {
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  color: #2f8f6b;
  background: rgba(54, 161, 121, .12);
  font-size: 11.5px;
  font-weight: 600;
}
.hmp-title {
  margin: 0;
  color: #20233a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-all;
}
.hmp-sub {
  margin: 6px 0 0;
  color: #8d90a6;
  font-size: 12.5px;
}

.hmp-body { padding-top: 18px; }
.hmp-qr {
  width: 176px;
  height: 176px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(106, 90, 224, .12), 0 18px 40px -30px rgba(74, 60, 170, .6);
}
.hmp-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }

.hmp-meta { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.hmp-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
}
.hmp-meta-row span { color: #9a97b4; }
.hmp-meta-row b { color: #3b3f57; font-weight: 600; word-break: break-all; }

.hmp-tip {
  margin: 14px 0 0;
  color: #9a97b4;
  font-size: 11.5px;
  line-height: 1.6;
}

.hmp-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 196px;
  padding-top: 18px;
}
.hmp-state p {
  margin: 0;
  max-width: 240px;
  color: #7c8098;
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 420px) {
  .hmp-card { padding: 24px 18px 20px; border-radius: 20px; }
  .hmp-qr { width: 156px; height: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  .hmp-close { transition: none; }
}