.translation-language-picker {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: -2px 0 13px;
  color: #8ca9b9; font-size: 12px;
}
.translation-language-picker > span { margin-right: 3px; font-weight: 750; }
.translation-language-picker button {
  min-height: 32px; padding: 5px 11px; border: 1px solid rgba(105, 151, 173, .35); border-radius: 999px;
  color: #b9ceda; background: rgba(9, 31, 42, .72); font: inherit; font-weight: 750;
}
.translation-language-picker button.active {
  color: #082034; border-color: #f4c94c; background: #f4c94c; box-shadow: 0 5px 16px rgba(244, 201, 76, .16);
}
.flashcard.arabic-translation .card-content h2 { direction: rtl; font-family: Arial, "Noto Sans Arabic", sans-serif; line-height: 1.35; }
.flashcard.revealed .card-content p.example-translation {
  margin-top: 8px; padding: 9px 12px; border-radius: 11px; background: #eef7f3;
  color: #315348; font-size: .86em; line-height: 1.5;
}
@media (max-width: 620px) {
  .translation-language-picker { justify-content: center; margin-top: -4px; }
  .translation-language-picker button { min-height: 36px; }
}
.translation-toggle {
  min-height: 34px;
  color: #216b4f;
  background: #eef6f1;
  border: 1px solid #cfe1d6;
  border-radius: 12px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.translation-toggle[aria-pressed="false"] {
  color: #68766e;
  background: #f5f6f5;
}

@media (max-width: 560px) {
  .translation-toggle { max-width: 86px; padding: 0 7px; font-size: 8px; }
}