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

.feedback-page {
  width: 750rpx;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 78% 4%, rgba(137, 95, 255, 0.16), transparent 20%),
    radial-gradient(circle at 18% 8%, rgba(118, 129, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #f7f3ff 0%, #fbfaff 48%, #ffffff 100%);
}

.feedback-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-back {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

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

.nav-title {
  font-size: 31rpx;
  line-height: 1.2;
  font-weight: 900;
  color: #111827;
}

.record-link {
  width: 142rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #111827;
  font-size: 24rpx;
  font-weight: 700;
}

.feedback-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  padding: 26rpx 38rpx 38rpx;
  box-sizing: border-box;
}

.hero-row {
  /* min-height: 184rpx; */
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.hero-illustration {
  /* width: 250rpx;
  height: 174rpx; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paper {
  width: 116rpx;
  height: 126rpx;
  border-radius: 18rpx;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  padding: 30rpx 20rpx 0 34rpx;
  background: linear-gradient(145deg, #ffffff, #ece5ff);
  box-shadow: 0 14rpx 24rpx rgba(120, 92, 219, 0.2);
  transform: rotate(-7deg);
  box-sizing: border-box;
}

.paper text {
  height: 8rpx;
  border-radius: 999rpx;
  background: #cfc2ff;
}

.chat-bubble {
  width: 114rpx;
  height: 82rpx;
  margin-left: -168rpx;
  margin-top: 44rpx;
  border-radius: 42rpx 42rpx 42rpx 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  background: linear-gradient(135deg, #9d79ff, #6d4cef);
  box-shadow: 0 16rpx 24rpx rgba(108, 76, 239, 0.25);
}

.chat-bubble text {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
}

.pencil {
  width: 76rpx;
  height: 22rpx;
  margin-left: 92rpx;
  margin-top: -18rpx;
  border-radius: 999rpx;
  background: linear-gradient(90deg, #7654f7 0 20%, #ffd05e 20% 78%, #ff6b91 78% 100%);
  transform: rotate(-42deg);
}

.heart {
  width: 38rpx;
  height: 38rpx;
  margin-right: -40rpx;
  margin-top: -88rpx;
  border-radius: 50% 50% 8rpx 50%;
  background: linear-gradient(135deg, #ff9ec2, #ff679a);
  transform: rotate(45deg);
  box-shadow: 0 8rpx 14rpx rgba(255, 105, 154, 0.22);
}

.hero-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hero-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 28rpx;
  line-height: 1.25;
  font-weight: 900;
  color: #111827;
}

.accent {
  color: #744dff;
}

.hero-desc {
  margin-top: 14rpx;
  color: #6c7280;
  font-size: 23rpx;
  line-height: 1.15;
}

.hero-line {
  width: 72rpx;
  height: 30rpx;
  margin-top: 8rpx;
  border-bottom: 5rpx solid #7c57ff;
  border-radius: 50%;
  transform: rotate(10deg);
}

.form-card {
  border-radius: 18rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8rpx 24rpx rgba(84, 91, 148, 0.06);
  box-sizing: border-box;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  color: #111827;
  font-size: 25rpx;
  font-weight: 900;
}

.optional {
  color: #8b91a1;
  font-size: 18rpx;
  font-weight: 600;
}

.title-icon {
  width: 30rpx;
  height: 30rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7454ff;
  background: #f3efff;
}

.title-icon text {
  display: block;
}

.type-icon text {
  width: 17rpx;
  height: 19rpx;
  border: 4rpx solid currentColor;
  border-radius: 5rpx 5rpx 9rpx 9rpx;
  box-sizing: border-box;
}

.pen-icon text {
  width: 19rpx;
  height: 19rpx;
  border-left: 5rpx solid currentColor;
  border-bottom: 5rpx solid currentColor;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.image-title-icon text {
  width: 18rpx;
  height: 16rpx;
  border: 4rpx solid currentColor;
  border-radius: 3rpx;
  box-sizing: border-box;
}

.phone-icon text {
  width: 18rpx;
  height: 22rpx;
  border-left: 5rpx solid currentColor;
  border-bottom: 5rpx solid currentColor;
  border-radius: 0 0 0 10rpx;
  transform: rotate(-25deg);
  box-sizing: border-box;
}

.type-grid {
  margin-top: 22rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12rpx;
}

.type-chip {
  height: 56rpx;
  border-radius: 11rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #737887;
  font-size: 20rpx;
  font-weight: 800;
  background: #f8f8fb;
  border: 2rpx solid #ececf3;
  box-sizing: border-box;
  white-space: nowrap;
}

.type-chip.active {
  color: #6e4cff;
  background: #ffffff;
  border-color: #805cff;
  filter: hue-rotate(180deg); /* 旋转色相 */
  filter: sepia(1) saturate(5) hue-rotate(200deg); /* 强制转为暖色调 */
}

.type-chip-icon {
  width: 22rpx;
  height: 22rpx;
  display: block;
  box-sizing: border-box;
}

.bug-icon {
  border-radius: 50%;
  border: 4rpx solid currentColor;
}

.star-icon {
  border-radius: 5rpx;
  border: 4rpx solid currentColor;
  transform: rotate(45deg);
}

.message-icon,
.more-icon {
  border: 4rpx solid currentColor;
  border-radius: 8rpx;
}

.desc-card {
  padding-bottom: 18rpx;
}

.textarea-shell {
  min-height: 158rpx;
  margin-top: 20rpx;
  padding: 20rpx 20rpx 34rpx;
  border-radius: 14rpx;
  border: 1rpx solid #e4e4eb;
  background: #fbfbfd;
  box-sizing: border-box;
}

.desc-input {
  width: 100%;
  height: 104rpx;
  color: #2d3340;
  font-size: 22rpx;
  line-height: 1.45;
}

.placeholder {
  color: #a2a6b2;
}

.counter {
  display: flex;
  justify-content: flex-end;
  color: #8f94a2;
  font-size: 18rpx;
  line-height: 1;
}

.image-card {
  min-height: 218rpx;
}

.upload-box {
  width: 106rpx;
  height: 106rpx;
  margin-top: 22rpx;
  border-radius: 13rpx;
  border: 2rpx dashed #d8d1f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  /* color: #7a57ff; */
  font-size: 19rpx;
  /* font-weight: 700; */
  margin-right: 20rpx;
  box-sizing: border-box;
}

.upload-box.image-full image {
  width: 100%;
  height: 100%;
  padding: 4rpx;
  box-sizing: border-box;
}

.plus-icon {
  font-size: 44rpx;
  line-height: 0.75;
  font-weight: 300;
}

.upload-tip {
  margin-top: 12rpx;
  color: #9ca0ad;
  font-size: 18rpx;
  line-height: 1;
}

.contact-card {
  min-height: 152rpx;
}

.contact-input {
  height: 54rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
  border-radius: 12rpx;
  border: 1rpx solid #e6e6ee;
  background: #fbfbfd;
  color: #2d3340;
  font-size: 21rpx;
  box-sizing: border-box;
}

.submit-btn {
  height: 68rpx;
  margin: 12rpx 14rpx 0;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 900;
  background: linear-gradient(180deg, #a45fff 0%, #6d2df1 100%);
  box-shadow: 0 12rpx 24rpx rgba(111, 48, 241, 0.24);
}

.thanks-text {
  margin-top: 8rpx;
  text-align: center;
  color: #969aa7;
  font-size: 19rpx;
  line-height: 1.2;
}

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