.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);
}

.env-switch {
  display: flex;
  width: 320rpx;
  margin-top: 22rpx;
  padding: 6rpx;
  border-radius: var(--r-pill);
  background: var(--panel);
}

.env-chip {
  flex: 1;
  height: 58rpx;
  line-height: 58rpx;
  text-align: center;
  border-radius: var(--r-pill);
  font-size: 25rpx;
  color: rgba(255, 255, 255, 0.5);
}

.env-chip.on {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 28rpx;
  margin-bottom: 20rpx;
  border-radius: var(--r-lg);
  background: var(--panel);
}

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

.card-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}

.card-badge {
  margin-left: 14rpx;
  padding: 2rpx 14rpx;
  border-radius: var(--r-pill);
  background: rgba(242, 53, 59, 0.18);
  color: var(--accent-2);
  font-size: 20rpx;
  vertical-align: 4rpx;
}

.card-id {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.4);
}

.card-note {
  margin-top: 10rpx;
  font-size: 23rpx;
  line-height: 1.5;
  color: #f0b45c;
}

.card-right {
  display: flex;
  align-items: center;
}

.card-price {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  margin-right: 22rpx;
}

.card-btn {
  min-width: 132rpx;
  height: 62rpx;
  line-height: 62rpx;
  text-align: center;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #ffffff;
  font-size: 26rpx;
}

.card-btn.dim {
  opacity: 0.6;
}

.result {
  margin-top: 12rpx;
  padding: 26rpx 28rpx;
  border-radius: var(--r-lg);
  background: var(--panel);
  border-left: 6rpx solid var(--accent);
}

.result.bad {
  border-left-color: #ff6b6b;
}

.result-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #ffffff;
}

.result-detail {
  margin-top: 10rpx;
  font-size: 25rpx;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.result-order {
  margin-top: 10rpx;
  font-size: 23rpx;
  color: rgba(255, 255, 255, 0.4);
  word-break: break-all;
}

.result-code {
  margin-top: 18rpx;
  padding: 20rpx 0;
  border-radius: var(--r-lg);
  background: rgba(79, 193, 255, 0.12);
  color: var(--cyan);
  font-size: 38rpx;
  font-weight: 600;
  letter-spacing: 4rpx;
  text-align: center;
}

.result-btn {
  display: inline-block;
  margin-top: 20rpx;
  padding: 12rpx 30rpx;
  border-radius: var(--r-pill);
  background: rgba(79, 193, 255, 0.16);
  color: var(--cyan);
  font-size: 25rpx;
}

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

.tip.dev {
  margin-top: 12rpx;
  color: rgba(255, 255, 255, 0.22);
}