#klyok_progress {
  display: none;
  margin: 8px 0;
}

.kp-wrap {
  position: relative;
  height: 16px;
  border: 2px solid #000;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.kp-bar {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg, #4caf50 0 16px, #81c784 16px 32px);
  transition: width .25s ease;
  filter: hue-rotate(calc(var(--klyok-progress, 0) * 1.2deg));
}

.kp-bar.anim {
  animation: kpStripe 1.2s linear infinite, kpGlow 1.4s ease-in-out infinite;
}

.kp-text {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #0d6efd;
}

.klyok-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}

.klyok-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.klyok-scope-btns {
  display: none;
  gap: 8px;
}

.klyok-info {
  font-size: 12px;
  color: #666;
  margin: 6px 0;
}

@keyframes kpStripe {
  from { background-position: 0 0; }
  to { background-position: 64px 0; }
}

@keyframes kpGlow {
  0% { box-shadow: 0 0 0 rgba(76, 175, 80, .25); }
  50% { box-shadow: 0 0 10px rgba(76, 175, 80, .5); }
  100% { box-shadow: 0 0 0 rgba(76, 175, 80, .25); }
}