/* 会员/保证金充值页共用弹窗与 loading */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-panel {
  width: 100%;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
}

.modal-title {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8rpx;
}

.modal-sub {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 24rpx;
}

.amount-input-wrap {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #f0e6d8;
  padding-bottom: 12rpx;
  margin-bottom: 20rpx;
}

.amount-prefix {
  font-size: 40rpx;
  font-weight: 700;
  color: #492f00;
  margin-right: 8rpx;
}

.amount-input {
  flex: 1;
  font-size: 36rpx;
}

.quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.quick-chip {
  padding: 12rpx 24rpx;
  border-radius: 999rpx;
  background: #f5f5f5;
  font-size: 26rpx;
  color: #666;
}

.quick-chip.active {
  background: #fff3cd;
  color: #492f00;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.modal-btn.cancel {
  background: #f5f5f5;
  color: #666;
}

.modal-btn.confirm {
  background: linear-gradient(90deg, #fae04d, #ffc0a3);
  color: #492f00;
  font-weight: 700;
}

.pay-method-item {
  padding: 28rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.pay-method-name {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
}

.pay-method-desc {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.balance-item {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 12rpx;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 28rpx;
}

.balance-need {
  color: #e6a23c;
  font-weight: 600;
}

.confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  font-size: 28rpx;
}

.loading-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-box {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.loading-spinner {
  width: 56rpx;
  height: 56rpx;
  border: 4rpx solid #f0e6d8;
  border-top-color: #f5a623;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}