/* Feedback belongs to the practice surface: warm guidance and a quiet mint finish. */
.feedback-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line, #a3b9aa2b);
  border-radius: 10px;
  background: #f3efe305;
  color: var(--paper, #f3efe3);
  font: 400 13px/1.6 var(--sans, system-ui, sans-serif);
  text-align: left;
}
.feedback-panel[hidden], .feedback-panel:empty { display: none; }
.feedback-panel[data-feedback="success"] {
  border-color: #a5d8b938;
  background: #a5d8b909;
}
.feedback-symbol {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  color: var(--gold, #dac18d);
}
.feedback-panel[data-feedback="success"] .feedback-symbol { color: var(--match, #a5d8b9); }
.feedback-body { display: block; min-width: 0; }
.feedback-message { display: block; color: var(--paper, #f3efe3); font-weight: 550; font-size: 14px; line-height: 1.5; }
.feedback-hint { display: block; margin-top: 4px; color: #bdc9bf; overflow-wrap: anywhere; }
.feedback-panel[data-feedback="success"] .feedback-hint { color: var(--match, #a5d8b9); }
@media (max-width: 380px) {
  .feedback-panel { padding: 14px; gap: 9px; }
  .feedback-message { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-panel, .feedback-panel *, .feedback-celebration { animation: none !important; transition: none !important; }
}