page {
  min-height: 100vh;
  background: #f8faff;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.gen-page {
  width: 750rpx;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 12% 0%, rgba(104, 126, 255, 0.08), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(130, 86, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #fbfcff 0%, #f6f8ff 46%, #ffffff 100%);
}

.gen-nav {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  flex: 0 0 60rpx;
}

.nav-back text {
  width: 26rpx;
  height: 26rpx;
  display: block;
  border-left: 5rpx solid #111827;
  border-bottom: 5rpx solid #111827;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.nav-title {
  flex: 1;
  min-width: 0;
  color: #111827;
  font-size: 34rpx;
  line-height: 42rpx;
  font-weight: 900;
  text-align: center;
}

.coin-pill {
  height: 50rpx;
  padding: 0 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  /* border: 2rpx solid #eef0fb; */
  border-radius: 28rpx;
  /* background: rgba(255, 255, 255, 0.88); */
  /* box-shadow: 0 8rpx 18rpx rgba(93, 102, 158, 0.12); */
  color: #111827;
  font-size: 22rpx;
  line-height: 28rpx;
  font-weight: 800;
  flex: 0 0 auto;
}

.coin-icon {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #ffd45d 0%, #ffa51f 100%);
  font-size: 17rpx;
  font-weight: 900;
}

.coin-count {
  color: #6657ff;
}

.gen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  padding: 30rpx;
  box-sizing: border-box;
  justify-content: space-between;
}

.confirm-card,
.cost-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2rpx solid #e6e9ff;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14rpx 34rpx rgba(80, 92, 170, 0.08);
  box-sizing: border-box;
}

.confirm-card {
  padding: 22rpx 28rpx 10rpx;
}

.card-title {
  color: #111827;
  font-size: 27rpx;
  line-height: 34rpx;
  font-weight: 900;
  padding-bottom: 18rpx;
  border-bottom: 2rpx solid #edf0f8;
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-row {
  min-height: 62rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  border-bottom: 2rpx solid #edf0f8;
}

.info-row:last-child {
  border-bottom: 0;
}

.avatar-row {
  min-height: 72rpx;
}

.info-label {
  flex: 0 0 160rpx;
  color: #303748;
  font-size: 24rpx;
  line-height: 32rpx;
  font-weight: 900;
}

.info-value,
.voice-value,
.script-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #41495b;
  font-size: 24rpx;
  line-height: 32rpx;
  font-weight: 700;
  text-align: right;
}

.small-avatar {
  width: 58rpx;
  height: 58rpx;
  border-radius: 10rpx;
  background:
    radial-gradient(circle at 50% 33%, #ffe1d2 0 17rpx, transparent 18rpx),
    radial-gradient(circle at 50% 34%, #33201b 0 24rpx, transparent 25rpx),
    linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
  flex: 0 0 58rpx;
}

.voice-value {
  gap: 10rpx;
}

.voice-icon {
  width: 28rpx;
  height: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d58ff;
  flex: 0 0 28rpx;
}

.voice-icon::before,
.voice-icon::after,
.voice-icon text {
  content: '';
  width: 5rpx;
  border-radius: 5rpx;
  background: #6d58ff;
}

.voice-icon::before { height: 18rpx; }
.voice-icon text { height: 28rpx; margin: 0 4rpx; display: block; }
.voice-icon::after { height: 20rpx; }

.script-row {
  align-items: flex-start;
  padding: 16rpx 0;
}

.script-summary {
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
  line-height: 34rpx;
}

.view-script {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #7062ff;
  font-size: 23rpx;
  font-weight: 800;
}

.right-arrow {
  width: 14rpx;
  height: 14rpx;
  border-right: 4rpx solid #7062ff;
  border-top: 4rpx solid #7062ff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.cost-card {
  padding: 12rpx 24rpx 22rpx;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 255, 248, 0.92) 100%);
  margin-bottom: calc(10rpx + env(safe-area-inset-bottom));
}

.cost-row {
  min-height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid rgba(224, 229, 242, 0.75);
  color: #303748;
  font-size: 24rpx;
  line-height: 32rpx;
  font-weight: 900;
}

.amount,
.balance-line,
.enough {
  display: flex;
  align-items: center;
}

.amount {
  gap: 10rpx;
  color: #111827;
}

.amount text:first-child {
  font-size: 32rpx;
  line-height: 38rpx;
  font-weight: 900;
}

.amount text:last-child {
  font-size: 23rpx;
  font-weight: 800;
}

.balance-line {
  gap: 22rpx;
}

.enough {
  gap: 8rpx;
  color: #40bf83;
  font-size: 21rpx;
  line-height: 28rpx;
  font-weight: 900;
}

.enough-waring {
  gap: 8rpx;
  color: red;
  font-size: 21rpx;
  line-height: 28rpx;
  font-weight: 900;
}

.enough text:first-child {
  width: 26rpx;
  height: 26rpx;
  border-radius: 50%;
  background: #42c982;
}

.enough text:first-child::after {
  content: '';
  width: 11rpx;
  height: 7rpx;
  margin: 7rpx auto 0;
  display: block;
  border-left: 3rpx solid #ffffff;
  border-bottom: 3rpx solid #ffffff;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.generate-action {
  height: 66rpx;
  margin-top: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  border-radius: 12rpx;
  color: #ffffff;
  background: linear-gradient(100deg, #4e84ff 0%, #7d3ff3 100%);
  box-shadow: 0 12rpx 24rpx rgba(91, 86, 245, 0.22);
  font-size: 27rpx;
  line-height: 34rpx;
  font-weight: 900;
}

.sparkle {
  width: 28rpx;
  height: 28rpx;
  background:
    linear-gradient(90deg, transparent 42%, #ffffff 43% 57%, transparent 58%),
    linear-gradient(0deg, transparent 42%, #ffffff 43% 57%, transparent 58%);
  transform: rotate(45deg);
}

.result-title {
  margin-top: 14rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #3f4dff;
  font-size: 25rpx;
  line-height: 32rpx;
  font-weight: 900;
}

.result-icon {
  width: 25rpx;
  height: 25rpx;
  border: 4rpx solid #625aff;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.video-preview {
  width: 100%;
  height: 274rpx;
  border-radius: 14rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 30rpx rgba(83, 92, 151, 0.13);
}

.preview-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.36) 0 3rpx, transparent 3rpx 64rpx),
    linear-gradient(180deg, #fff4e3 0%, #f1dcc3 58%, #d9b98f 100%);
}

.preview-plant {
  width: 86rpx;
  height: 126rpx;
  margin-bottom: 18rpx;
  border-radius: 50rpx 50rpx 12rpx 12rpx;
  background:
    radial-gradient(circle at 30% 24%, #79ad65 0 22rpx, transparent 23rpx),
    radial-gradient(circle at 66% 32%, #6aa05f 0 24rpx, transparent 25rpx),
    radial-gradient(circle at 50% 50%, #7eb86a 0 25rpx, transparent 26rpx),
    linear-gradient(180deg, transparent 0 82rpx, #a9794d 83rpx 100%);
}

.plant-left {
  margin-right: 76rpx;
}

.plant-right {
  margin-left: 76rpx;
}

.preview-avatar {
  width: 176rpx;
  height: 236rpx;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-head {
  width: 116rpx;
  height: 130rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 60rpx 60rpx 42rpx 42rpx;
  background: linear-gradient(160deg, #241a18 0%, #604038 60%, #8a6258 100%);
}

.avatar-face {
  width: 78rpx;
  height: 92rpx;
  margin-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  border-radius: 42rpx 42rpx 34rpx 34rpx;
  background: linear-gradient(180deg, #ffe6d9 0%, #ffd0c2 100%);
}

.avatar-eyes {
  width: 48rpx;
  display: flex;
  justify-content: space-between;
}

.avatar-eyes text {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #241a18;
}

.avatar-mouth {
  width: 26rpx;
  height: 8rpx;
  border-radius: 0 0 16rpx 16rpx;
  background: #ca6975;
}

.avatar-body {
  width: 160rpx;
  height: 106rpx;
  border-radius: 46rpx 46rpx 0 0;
  background: linear-gradient(120deg, #ffffff 0%, #f5f4f1 48%, #ffffff 100%);
}

.play-btn {
  width: 74rpx;
  height: 74rpx;
  margin-left: -126rpx;
  margin-bottom: 54rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: rgba(49, 43, 38, 0.48);
  box-sizing: border-box;
}

.play-btn text {
  width: 0;
  height: 0;
  margin-left: 6rpx;
  border-top: 16rpx solid transparent;
  border-bottom: 16rpx solid transparent;
  border-left: 24rpx solid #ffffff;
}

.bottom-actions {
  display: flex;
  gap: 18rpx;
}

.action-primary,
.action-outline {
  height: 82rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  border-radius: 14rpx;
  font-size: 24rpx;
  line-height: 31rpx;
  font-weight: 900;
  box-sizing: border-box;
  flex: 1;
}

.action-primary {
  color: #ffffff;
  background: linear-gradient(100deg, #5a80ff 0%, #764df3 100%);
  box-shadow: 0 12rpx 24rpx rgba(91, 86, 245, 0.18);
}

.action-outline {
  color: #625aff;
  border: 2rpx solid #dce0f5;
  background: #ffffff;
}

.download-icon {
  width: 24rpx;
  height: 24rpx;
  border-left: 4rpx solid #ffffff;
  border-bottom: 4rpx solid #ffffff;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.refresh-icon {
  width: 24rpx;
  height: 24rpx;
  border: 4rpx solid #625aff;
  border-right-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
}

.home-icon {
  width: 25rpx;
  height: 22rpx;
  border: 4rpx solid #625aff;
  border-top: 0;
  border-radius: 4rpx;
  box-sizing: border-box;
  transform: translateY(4rpx);
}

.home-icon::before {
  content: '';
  width: 18rpx;
  height: 18rpx;
  display: block;
  border-left: 4rpx solid #625aff;
  border-top: 4rpx solid #625aff;
  transform: rotate(45deg) translate(-4rpx, -13rpx);
  box-sizing: border-box;
}

.save-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  color: #8d94a5;
  font-size: 23rpx;
  line-height: 30rpx;
  font-weight: 600;
  margin-bottom: calc(10rpx + env(safe-area-inset-bottom));
}

.tip-icon {
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #9aa1b2;
  border-radius: 50%;
  font-size: 16rpx;
  line-height: 18rpx;
  font-weight: 900;
  box-sizing: border-box;
}

.icon-placeholder {
  display: block;
  flex-shrink: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}