.div-wrapper {
  background-color: #000000;
  width: 100%;
  min-height: 100vh; /* 占满整个屏幕高度 */
  position: relative;
}

.div-wrapper .rectangle {
  width: 100%;
  min-height: 100vh; /* 占满整个屏幕高度 */
  position: relative;
  background-color: #000000;
  backdrop-filter: blur(5px) brightness(100%);
  -webkit-backdrop-filter: blur(5px) brightness(100%);
  top: 0;
  left: 0;
}

.div-wrapper .mask-group {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.div-wrapper .frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.div-wrapper .time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.33px;
  padding: 0px 5.6px 0px 14.93px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.div-wrapper .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -0.93px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 15.9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20.5px;
  white-space: nowrap;
  bottom: 25px;
}

.div-wrapper .dynamic-island {
  position: relative;
  width: 115.67px;
  height: 9.33px;
}

.div-wrapper .levels {
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.div-wrapper .div {
  position: absolute;
  top: 71px;
  right: 20px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  text-align: right;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.div-wrapper .group {
  position: absolute;
  top: 230px;
  left: 16px;
  width: 100%;
  height: 60px;
}

.div-wrapper .rectangle-2 {
  width: 100%;
  height: 100%;
  background-color: #ffffff0d;
  border-radius: 12px;
  border: 1px solid;
  border-color: #ffffff1a;
  position: absolute;
  top: 0;
  left: 0;
}

.div-wrapper .text-wrapper-2 {
  position: absolute;
  top: 20px;
  left: 56px;
  opacity: 0.2;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.div-wrapper .img {
  position: absolute;
  width: 5.80%;
  height: 33.33%;
  top: 33.33%;
  left: 5.80%;
}

.div-wrapper .group-2 {
  position: absolute;
  top: 338px;
  left: 16px;
  width: 345px;
  height: 60px;
}

.div-wrapper .lock {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 20px;
  height: 20px;
}

.div-wrapper .icon {
  position: absolute;
  width: 70.00%;
  height: 85.00%;
  top: 0;
  left: 10.82%;
}

.div-wrapper .group-3 {
  position: absolute;
  top: 446px;
  left: 16px;
  width: 345px;
  height: 60px;
}

.div-wrapper .image {
  position: absolute;
  top: 13px;
  left: 245px;
  width: 85px;
  height: 34px;
  aspect-ratio: 2.5;
}

.div-wrapper .text-wrapper-3 {
  top: 314px;
  left: 56px;
  opacity: 0.6;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  letter-spacing: 0;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-4 {
  top: 422px;
  left: 56px;
  opacity: 0.6;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  letter-spacing: 0;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-5 {
  top: 206px;
  left: 56px;
  opacity: 0.6;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  letter-spacing: 0;
  white-space: nowrap;
}

.div-wrapper .group-4 {
  position: absolute;
  top: 554px;       /* 保留垂直位置 */
  left: 50%;        /* 水平中心 */
  transform: translateX(-50%); /* 水平居中 */
  
  width: 90%;       /* 小屏幕下自适应宽度 */
  max-width: 305px; /* 大屏幕保持原宽度 */
  height: 56px;
  box-sizing: border-box; /* 避免内边距撑出屏幕 */
}

.div-wrapper .rectangle-3 {
  width: 100%;
  height: 56px;
  background-color: #c0ff16;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.div-wrapper .text-wrapper-6 {
  top: 18px;
  left: 135px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 16px;
  line-height: 20px;
  position: absolute;
  letter-spacing: 0;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-7 {
  top: 642px;
  left: calc(50.00% - 28px);
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  letter-spacing: 0;
  white-space: nowrap;
}

.div-wrapper .wallet {
  position: absolute;
  top: 94px;
  left: calc(50.00% - 48px);
  width: 96px;
  height: 96px;
}

.bg-svg {
  width: 100%;      /* 横向占满容器 */
  height: 100vh;    /* 高度占满屏幕 */
  display: block;   /* 避免 inline svg 的空白间距 */
  object-fit: cover; /* 保持纵横比并填满 */
}



/* ========== 响应式缩放 & 滚动支持 ========== */

/* 1️⃣ 保证外层容器可滚动 */
.div-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
}

/* 2️⃣ 针对小屏幕自动整体缩放，而不影响滚动 */
@media (max-width: 375px) {
  /* 通过 transform 缩放内部内容 */
  .div-wrapper {
    position: relative;
    transform-origin: top center;
    /* 自动计算缩放比例，比如 360px 宽时 scale ≈ 0.96 */
    transform: scale(calc(100vw / 375));
    height: calc(100vh / (100vw / 375)); /* 保证缩放后仍能滚动 */
  }
}

/* 3️⃣ 额外优化字体与输入区域尺寸 */
@media (max-width: 375px) {
  .div-wrapper .text-wrapper,
  .div-wrapper .text-wrapper-2,
  .div-wrapper .text-wrapper-3,
  .div-wrapper .text-wrapper-4,
  .div-wrapper .text-wrapper-5,
  .div-wrapper .text-wrapper-6,
  .div-wrapper .text-wrapper-7 {
    font-size: 0.9rem;
  }

  .div-wrapper .rectangle-2,
  .div-wrapper .rectangle-3 {
    border-radius: 10px;
  }

  .div-wrapper .group,
  .div-wrapper .group-2,
  .div-wrapper .group-3{
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }

  .div-wrapper .image {
    left: auto;
    right: 10px;
    width: 70px;
  }
}


.div-wrapper .group,
.div-wrapper .group-2,
.div-wrapper .group-3{
  position: absolute;
  left: 5%;              /* 相对居中，保留左右留白 */
  width: 90%;            /* 不再写死345px，自动适应 */
  max-width: 345px;      /* 给个上限防止太宽 */
  height: 60px;
  box-sizing: border-box; /* 避免内边距撑开 */
}