.page {
  min-height: 100vh;
  padding: 32rpx 28rpx 48rpx;
  background: var(--bg);
}

.head {
  margin-bottom: 28rpx;
}

.head-title {
  font-size: 40rpx;
  font-weight: 600;
  color: #ffffff;
}

.head-sub {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.45);
}

.banner {
  padding: 22rpx 26rpx;
  margin-bottom: 20rpx;
  border-radius: var(--r-lg);
  background: var(--panel);
  color: rgba(255, 255, 255, 0.6);
  font-size: 25rpx;
  line-height: 1.6;
}

.card {
  padding: 26rpx 28rpx;
  margin-bottom: 20rpx;
  border-radius: var(--r-lg);
  background: var(--panel);
}

.card:active {
  background: var(--panel-2);
}

.card-name {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.55);
}

.card-tag {
  margin-left: 14rpx;
  padding: 2rpx 14rpx;
  border-radius: var(--r-pill);
  background: rgba(245, 158, 11, 0.16);
  color: #f0b45c;
  font-size: 20rpx;
}

.card-code {
  margin-top: 14rpx;
  font-size: 38rpx;
  font-weight: 600;
  letter-spacing: 4rpx;
  color: var(--cyan);
  word-break: break-all;
}

.card-time {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.35);
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12rpx;
}

.card-refund {
  padding: 6rpx 22rpx;
  border-radius: var(--r-pill);
  border: 2rpx solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
  font-size: 22rpx;
}

.card-refund:active {
  background: rgba(255, 255, 255, 0.06);
}

.tip {
  margin-top: 10rpx;
  font-size: 22rpx;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.35);
}

/* 空态跟着标题走，不用撑满整屏 */
.placeholder {
  height: auto;
  padding: 140rpx 40rpx 0;
}