/* O/L English — Read-aloud button style. Tiny, themeable. */
.eng-tts-host { position: relative; }
.eng-tts-btn {
  float: right;
  margin: 0 0 6px 8px;
  border: 1px solid rgba(124, 108, 255, 0.45);
  background: rgba(124, 108, 255, 0.10);
  color: #7c6cff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.12s;
}
.eng-tts-btn:hover { background: rgba(124, 108, 255, 0.22); transform: scale(1.08); }
.eng-tts-btn.eng-tts-on {
  background: #7c6cff;
  color: #fff;
  border-color: #7c6cff;
  animation: eng-tts-pulse 1.4s ease-in-out infinite;
}
@keyframes eng-tts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 108, 255, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 108, 255, 0); }
}
/* On grammar-guide page, light theme buttons */
html:not(.dark) .eng-tts-btn { color: #1a56db; border-color: rgba(26, 86, 219, 0.45); background: rgba(26, 86, 219, 0.08); }
html:not(.dark) .eng-tts-btn:hover { background: rgba(26, 86, 219, 0.18); }
html:not(.dark) .eng-tts-btn.eng-tts-on { background: #1a56db; color: #fff; border-color: #1a56db; }