/* =========================
FEEDBACK SYSTEM
========================= */

.action-feedback {
  margin-top: 12px;

  font-weight: 700;
  font-size: 16px;

  color: #b8ffd0;

  opacity: 0;

  transform:
    translateY(10px) scale(0.98);

  transition:
    all 0.4s ease;

  display: block;

  text-align: center;
}

.action-feedback.show {
  opacity: 1;

  transform:
    translateY(0) scale(1);
}

.action-feedback.highlight {
  animation: feedbackPulse 0.6s ease;
}

@keyframes feedbackPulse {
  0% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.action-feedback.success-bg {
  background:
    rgba(105,216,137,0.08);

  border:
    1px solid rgba(105,216,137,0.22);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.18);

  color:
    #b8ffd0;

  padding: 14px 20px;

  border-radius: 16px;

  max-width: 420px;

  margin-left: auto;
  margin-right: auto;

  margin-top: 20px;
}

/* =========================
   PRACTICE FEEDBACK
   Unified visual style for positive exercise feedback
========================= */

.feedback.success {
  width: 100%;
  max-width: 720px;

  display: flex;
  align-items: center;

  margin:
    18px
    0
    0;

  padding:
    18px
    22px;

  border-radius:
    20px;

  background:
    rgba(105,216,137,0.08);

  border:
    1px solid rgba(105,216,137,0.22);

  color:
    #b8ffd0;

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.45;

  text-align:
    left;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.18);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.feedback.success::before {
  content: "✓";

  flex:
    0
    0
    auto;

  margin-right:
    12px;

  font-size:
    1.25em;

  line-height:
    1;

  color:
    #b8ffd0;
}

.practice-end-zone .feedback.success {
  margin-top:
    0;

  margin-bottom:
    24px;
}

@media (max-width: 640px) {
  .feedback.success {
    padding:
      16px
      18px;

    font-size:
      16px;

    border-radius:
      18px;
  }
}