.td-skin-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem;
  border-radius: 999px;
  border: 1px solid var(--td-color-border, #d7e3e0);
  background: var(--td-color-surface, #fff);
}

.td-skin-switcher__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--td-color-text-muted, #5b6b73);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}

.td-skin-switcher__btn:hover {
  color: var(--td-color-text, #102027);
}

.td-skin-switcher__btn.is-active {
  background: var(--td-color-primary-soft, #e6f4f3);
  color: var(--td-color-primary, #0b6e6a);
}

.td-skin-switcher--compact .td-skin-switcher__btn {
  padding: 0.22rem 0.45rem;
  font-size: 0.68rem;
}