.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.language-switcher .language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.language-switcher .language-option:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, var(--primary) 22%);
}

.language-switcher .language-option.is-active {
  color: #ffffff;
  background: var(--primary);
}

[data-theme="dark"] .language-switcher {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 90%, #000 10%);
}

[data-theme="dark"] .language-switcher .language-option.is-active {
  color: #022c22;
}

.translation-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.45rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  vertical-align: middle;
}

.translation-state-badge.is-neutral {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--border) 12%);
  border-color: var(--border);
}

.translation-state-badge.is-source {
  color: #0f766e;
  background: rgba(45, 212, 191, 0.16);
  border-color: rgba(45, 212, 191, 0.35);
}

.translation-state-badge.is-warning {
  color: #b45309;
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.45);
}

.translation-state-badge.is-complete {
  color: #166534;
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.38);
}

[data-theme="dark"] .translation-state-badge.is-source {
  color: #5eead4;
}

[data-theme="dark"] .translation-state-badge.is-warning {
  color: #fcd34d;
}

[data-theme="dark"] .translation-state-badge.is-complete {
  color: #86efac;
}