.components-container-rrJE_ {
  font-family: -apple-system, 'system-ui', 'San Francisco', 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--kl-page-background-color, #f3f4f6);
  padding: 20px;
  box-sizing: border-box;
}

.components-background-bJqO9 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kl-page-background-color, #f3f4f6);
  z-index: -1;
}

.components-content-fVkn1 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.components-card-azJl2 {
  background: var(--kl-primary-background-color, #ffffff);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.components-cardDropShadow-dwlsK {
  box-shadow: var(--kl-card-drop-shadow-color, rgba(0, 0, 0, 0.06)) 0px 2px 8px;
}

.components-header-U9N9u {
  font-size: calc(24px * var(--kl-font-size-scale, 1));
  font-weight: 700;
  margin: 0 0 32px 0;
  color: var(--kl-primary-font-color, #1d1e20);
  text-align: center;
  line-height: 1.3;
}

.components-message-JLJNG {
  font-size: calc(16px * var(--kl-font-size-scale, 1));
  color: var(--kl-secondary-font-color, #6b7280);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .components-container-rrJE_ {
    padding: 16px;
    align-items: flex-start;
    padding-top: 40px;
  }

  .components-card-azJl2 {
    padding: 32px 24px;
  }

  .components-header-U9N9u {
    font-size: calc(20px * var(--kl-font-size-scale, 1));
    margin-bottom: 24px;
  }
}

.styles-iconWrapper-W9ZvB {
  display: flex;
}

  .styles-iconWrapper-W9ZvB svg {
    width: 32px;
    height: 32px;
  }

.styles-ratingContainer-edt4i {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

.styles-ratingButton-K10Xj {
  background: var(--kl-primary-background-color, #ffffff);
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
}

.styles-ratingButton-K10Xj:focus {
  outline: none;
}

.styles-ratingButton-K10Xj:focus-visible {
  outline: none;
}

.styles-ratingButton-K10Xj:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.styles-ratingButton-K10Xj:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.styles-ratingButton-K10Xj:active:not(:disabled) {
  transform: translateY(0);
}

/* EMOJI style (3D emojis) */
.styles-ratingEmoji-YxT31 .styles-ratingButton-K10Xj {
  width: 68px;
  height: 68px;
  font-size: 34px;
  padding: 10px;
}

.styles-ratingEmoji-YxT31 .styles-ratingSelected-TCbfq {
  border-color: var(--kl-primary-color, #1d1e20);
  background: var(--kl-selected-background-color, #f3f4f6);
}

.styles-ratingEmoji-YxT31 .styles-ratingUnselected-AJ_Aw {
  border-color: #e5e7eb;
  background: var(--kl-primary-background-color, #ffffff);
}

/* FLAT (simple emoji faces) style */
.styles-ratingFlat-kPJBQ .styles-ratingButton-K10Xj {
  width: 68px;
  height: 68px;
  font-size: 34px;
  padding: 10px;
}

.styles-ratingFlat-kPJBQ .styles-ratingSelected-TCbfq {
  border-color: var(--kl-primary-color, #1d1e20);
  background: var(--kl-selected-background-color, #f3f4f6);
}

.styles-ratingFlat-kPJBQ .styles-ratingUnselected-AJ_Aw {
  border-color: #e5e7eb;
  background: var(--kl-primary-background-color, #ffffff);
}

/* STARS style */
.styles-ratingStars-lGPZO .styles-ratingButton-K10Xj {
  width: 52px;
  height: 52px;
  font-size: 30px;
  padding: 8px;
  border: none;
  background: transparent;
}

.styles-ratingStars-lGPZO .styles-ratingSelected-TCbfq {
  color: var(--kl-star-color, #fbbf24);
}

.styles-ratingStars-lGPZO .styles-ratingUnselected-AJ_Aw {
  color: #d1d5db;
}

.styles-ratingStars-lGPZO .styles-ratingButton-K10Xj:hover:not(:disabled) {
  transform: scale(1.15);
  box-shadow: none;
}

.styles-ratingStars-lGPZO .styles-ratingButton-K10Xj:active:not(:disabled) {
  transform: scale(1.05);
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .styles-ratingContainer-edt4i {
    gap: 8px;
    margin: 16px 0;
  }

  /* EMOJI and FLAT on mobile */
  .styles-ratingEmoji-YxT31 .styles-ratingButton-K10Xj,
  .styles-ratingFlat-kPJBQ .styles-ratingButton-K10Xj {
    width: 56px;
    height: 56px;
    font-size: 28px;
    padding: 8px;
  }

  /* STARS on mobile */
  .styles-ratingStars-lGPZO .styles-ratingButton-K10Xj {
    width: 48px;
    height: 48px;
    font-size: 26px;
    padding: 6px;
  }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  .styles-ratingContainer-edt4i {
    gap: 6px;
  }

  .styles-ratingEmoji-YxT31 .styles-ratingButton-K10Xj,
  .styles-ratingFlat-kPJBQ .styles-ratingButton-K10Xj {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }

  .styles-ratingStars-lGPZO .styles-ratingButton-K10Xj {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}

.styles-container-jAPwe {
  font-family: -apple-system, 'system-ui', 'San Francisco', 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--kl-page-background-color, #f3f4f6);
  padding: 20px;
  box-sizing: border-box;
}

.styles-background-AMoUH {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kl-page-background-color, #f3f4f6);
  z-index: -1;
}

.styles-content-ZAqbw {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.styles-card-VYVFT {
  background: var(--kl-primary-background-color, #ffffff);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.styles-cardDropShadow-KMeHx {
  box-shadow: var(--kl-card-drop-shadow-color, rgba(0, 0, 0, 0.06)) 0px 2px 8px;
}

.styles-header-rs8w9 {
  font-size: calc(24px * var(--kl-font-size-scale, 1));
  font-weight: 700;
  margin: 0 0 32px 0;
  color: var(--kl-primary-font-color, #1d1e20);
  text-align: center;
  line-height: 1.3;
}

.styles-message-lRzF_ {
  font-size: calc(16px * var(--kl-font-size-scale, 1));
  color: var(--kl-secondary-font-color, #6b7280);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

.styles-questionCard-sV7AW {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 20px;
}

.styles-questionText-OXYhr {
  font-size: calc(18px * var(--kl-font-size-scale, 1));
  font-weight: 600;
  color: var(--kl-primary-font-color, #1d1e20);
  margin: 0 0 20px 0;
  text-align: center;
  line-height: 1.4;
}

.styles-textarea-t4V29 {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  font-size: calc(15px * var(--kl-font-size-scale, 1));
  font-family: inherit;
  color: var(--kl-primary-font-color, #1d1e20);
  background: var(--kl-primary-background-color, #ffffff);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
  transition: all 0.2s ease;
  margin-top: 20px;
  box-sizing: border-box;
  line-height: 1.5;
  -webkit-appearance: none;
}

.styles-textarea-t4V29::-moz-placeholder {
  color: var(--kl-placeholder-color, #9ca3af);
  font-size: calc(15px * var(--kl-font-size-scale, 1));
}

.styles-textarea-t4V29::placeholder {
  color: var(--kl-placeholder-color, #9ca3af);
  font-size: calc(15px * var(--kl-font-size-scale, 1));
}

.styles-textarea-t4V29:focus {
  outline: none;
  border-color: var(--kl-primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.styles-textarea-t4V29:disabled {
  background: var(--kl-disabled-background-color, #f9fafb);
  cursor: not-allowed;
  opacity: 0.6;
}

.styles-error-_qTAj {
  color: var(--kl-error-color, #dc2626);
  font-size: calc(14px * var(--kl-font-size-scale, 1));
  margin: 16px 0;
  text-align: center;
  font-weight: 500;
}

.styles-submitButton-C_1Va {
  width: 100%;
  margin-top: 28px;
  padding: 14px 32px;
  font-size: calc(16px * var(--kl-font-size-scale, 1));
  font-weight: 600;
  background-color: var(--kl-button-color, #1d1e20);
  color: var(--kl-button-text-color, #ffffff);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.styles-submitButton-C_1Va:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.styles-submitButton-C_1Va:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.styles-submitButton-C_1Va:active:not(:disabled) {
  transform: translateY(0);
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .styles-container-jAPwe {
    padding: 16px;
    align-items: flex-start;
    padding-top: 40px;
  }

  .styles-card-VYVFT {
    padding: 32px 24px;
  }

  .styles-header-rs8w9 {
    font-size: calc(20px * var(--kl-font-size-scale, 1));
    margin-bottom: 24px;
  }

  .styles-questionText-OXYhr {
    font-size: calc(16px * var(--kl-font-size-scale, 1));
    margin-bottom: 16px;
  }

  .styles-textarea-t4V29 {
    font-size: calc(16px * var(--kl-font-size-scale, 1));
    min-height: 100px;
  }

  .styles-submitButton-C_1Va {
    padding: 12px 24px;
    font-size: calc(15px * var(--kl-font-size-scale, 1));
  }
}

/* Ensure proper rendering on iOS */
@supports (-webkit-touch-callout: none) {
  .styles-textarea-t4V29 {
    font-size: 16px; /* Prevent iOS zoom on focus */
  }
}