.kl-pro {
  max-width: 720px;
  margin: auto;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.kl-row {
  display: flex;
  gap: 10px;
}

textarea {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  padding: 10px;
}

.kl-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.kl-output {
  margin-top: 15px;
  padding: 15px;
  background: #fafafa;
  border-radius: 10px;
  min-height: 80px;
  line-height: 1.8;
}

/* kanji highlight */
.kanji {
  background: #fff3a0;
  padding: 2px 4px;
  border-radius: 4px;
}

/* furigana */
ruby {
  font-size: 20px;
}
rt {
  font-size: 12px;
  color: #666;
}
/* Skeleton animasi */ 
.kl-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
  height: 60px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* spinner */
.kl-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #ddd;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 10px auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}