.feedbackPage { max-width: 760px; }
.feedbackForm { display: grid; gap: 1.2rem; min-width: 0; }
.fieldLabel, .ratingLegend { display: block; margin-bottom: .4rem; padding: 0; font-size: 1.1rem; }
.fieldRequired { font-style: normal; }
.field input[type="text"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea {
  width: 100%;
  padding: .85rem 1.1rem;
  background: var(--colorField);
  color: inherit;
  border: 2px solid transparent;
  border-radius: 10px;
  font: inherit;
  transition: border-color var(--durFast) var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--colorInk); }
.field.hasError input, .field.hasError select, .field.hasError textarea { border-style: dashed; border-color: var(--colorInk); }
.fieldError { min-height: 1.3em; margin: .25rem 0 0; font-size: .88rem; font-weight: 600; }
.fieldError:not(:empty)::before { content: "! "; }
.rating { min-width: 0; margin: 0; padding: 0; border: 0; }
.ratingStars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; }
.ratingStars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ratingOption { padding: .2rem; cursor: pointer; }
.ratingOption svg { display: block; width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--colorInk); transition: fill var(--durFast) var(--ease); }
.ratingStars input:checked ~ .ratingOption svg, .ratingOption:hover svg, .ratingOption:hover ~ .ratingOption svg { fill: var(--colorInk); }
.ratingStars input:focus-visible + .ratingOption { outline: 3px solid var(--colorButton); outline-offset: 2px; border-radius: 8px; }
.checkbox { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.5; cursor: pointer; }
.checkbox input { flex: none; width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; accent-color: var(--colorButton); }
.button { justify-self: start; min-height: 44px; padding: .8rem 2.2rem; background: var(--colorButton); color: var(--colorButtonText); border: 0; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform var(--durFast) var(--ease), opacity var(--durFast) var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:disabled { opacity: .6; cursor: wait; }
.formStatus { padding: 1rem 1.2rem; background: var(--colorSoft); border-radius: 12px; font-weight: 600; animation: dropIn var(--durFast) var(--ease); }
.formStatus:empty { display: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.captcha { min-height: 65px; }
@media (hover: none) { .button:hover { transform: none; } }
.feedbackIntro { max-width: 36em; margin: 0 auto 2rem; line-height: 1.7; text-align: center; opacity: .9; text-wrap: balance; }
.field input, .field select, .field textarea { box-shadow: 0 0 0 0 transparent; transition: border-color var(--durFast) var(--ease), box-shadow var(--durFast) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px var(--colorSoft); }
.ratingStars input:checked + .ratingOption svg { animation: starPop var(--durFast) var(--ease); }
.ratingOption svg { transition: fill var(--durFast) var(--ease), transform var(--durFast) var(--ease); }
.ratingOption:hover svg { transform: scale(1.12); }
.button:disabled { animation: blink var(--loop) ease-in-out infinite; }
@keyframes starPop { 40% { transform: scale(1.3); } }