[v-cloak] { display: none; }
.request-feedback { padding: 14px 16px; border: 1px solid rgba(20, 20, 19, .1); border-radius: 12px; color: #44433f; background: #f0eee6; }
.request-feedback strong { display: block; font-size: 14px; font-weight: 600; }
.request-feedback p { margin: 6px 0 12px; font-size: 12px; line-height: 1.6; }
.request-feedback.complete { background: #dfe9e4; color: #405f50; }
.feedback-track { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(20, 20, 19, .1); }
.feedback-track span { display: block; width: 40%; height: 100%; border-radius: inherit; background: #d97757; animation: feedback-slide 1.6s ease-in-out infinite; }
.complete .feedback-track span { width: 100%; background: #405f50; animation: none; }
.feedback-spinner { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: feedback-spin .8s linear infinite; }
.feedback-enter-active, .feedback-leave-active { transition: opacity .18s ease, transform .18s ease; }
.feedback-enter, .feedback-leave-to { opacity: 0; transform: translateY(4px); }
@keyframes feedback-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes feedback-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .feedback-track span, .feedback-spinner { animation: none; }
    .feedback-enter-active, .feedback-leave-active { transition: none; }
}